关闭

学习angularjs的总结与心得-hide/show

标签: ng-show
565人阅读 评论(1) 收藏 举报
分类:
在学习angularjs的指令和自定义指令的时候,发现一个比较有意思的东西,ng-hide和ng-show指令控制元素显示和隐藏,最强大的部分则是我们不必再需要CSS或者JS来操作显示隐藏,由这些指令即可完成。
其中,简单的使用只需要引用angular.js即可,例如:
    (1)用作布尔值:
    <a href ng-click="hide = !hide">点击我显示图片</a>
    <img ng-src="http://tva2.sinaimg.cn/crop.0.0.720.720.180/691c7295jw8elyjv1o7hvj20k00k00ua.jpg" ng-show="show">
    (2)判断表达式:
    <input type="text" ng-model="hello" />
    <img ng-src="http://tva2.sinaimg.cn/crop.0.0.720.720.180/691c7295jw8elyjv1o7hvj20k00k00ua.jpg" ng-show="hello == 'beautiful_girl'" />
再者,稍微复杂一点的则输入数字然后判断其奇偶性:
    <input type="text" ng-model="num" />
    <div>
        {{num}}
    </div>
    <div ng-show="isEven(numS)">
        偶数
    </div>
    <div ng-show="!isEven(numS)">
        奇数
    </div>

    <script>
        var app=angular.module('app',[]);
        app.controller('ctrl',function($scope){

            $scope.isEven = function(e){
                e=$scope.num;
                if(e % 2 == 0){
                    return true;
                }else{
                    return false;
                }
            }
        });
    </script>
2
0
查看评论

AngularJS 用ng-show来绑定ng-model

AngularJS 用ng-show来绑定ng-model<html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> &l...
  • yangxh11111
  • yangxh11111
  • 2016-12-13 13:34
  • 551

angularjs ng-show的用法

4. ng-show 判断 安 装
  • u012767607
  • u012767607
  • 2017-04-14 11:13
  • 740

angularjs学习总结 详细教程

1 前言 前端技术的发展是如此之快,各种优秀技术、优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢。 AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档,一...
  • yy374864125
  • yy374864125
  • 2014-11-21 15:15
  • 59780

AngularJS使用心得(持续更新中)

使用中遇到的问题:1.{{}}取值无效,控制台输出ng-controller指向的函数名is not a function:  a). 查看elements,dom元素上有class=”ng-scope”,判断angular.js引入正常。   b). 控制台输入ng-controller指向的函...
  • qq_26654881
  • qq_26654881
  • 2016-04-19 23:55
  • 478

07模块-AngularJS基础教程

本系列教程以翻译Chris Smith的Angualr Basics为梗概,融合博主自己的理解,为大家提供一个简单明了的学习教程,通过讲解基础、实用的内容,简化学习进程、降低学习难度。本文为系列教程的第7篇,Angular 模块。
  • whqet
  • whqet
  • 2015-04-19 11:54
  • 3821

angularJS学习之路(十一)---ng-show和ng-hide

ng-show 和 ng-hide 根据表达式的值来显示或者隐藏HTML元素 ng-show   false   被隐藏 ng-hide true 被隐藏 2 + 2 isn't 5, don't sho...
  • u014737138
  • u014737138
  • 2015-11-23 13:38
  • 399

jQuery 效果 show() 和 hide()方法

jQuery 效果 - show() 方法 定义和用法 如果被选元素已被隐藏,则显示这些元素: 语法 $(selector).show(speed,callback) 参数 描述 speed 可选。规定元素从隐藏到完...
  • ssisse
  • ssisse
  • 2016-08-25 19:57
  • 685

树与二叉树总结

1.树 2.二叉树 3.二叉树的节点类及二叉树类 4.二叉树的遍历 5.线索二叉树 6.树和森林 7.树的应用
  • chinaaaaaaaaaaa
  • chinaaaaaaaaaaa
  • 2015-02-14 21:23
  • 736

AngularJS实例教程(一)

AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 An...
  • happyduoduo1
  • happyduoduo1
  • 2016-07-05 14:30
  • 2591

angularJs ng-show命令隐藏

html ng-app>     body>         div ng-controller="DeathrayMenuC...
  • bing_JavaScript
  • bing_JavaScript
  • 2016-09-28 15:52
  • 1325
    个人资料
    • 访问:1876次
    • 积分:72
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论