angularJS（5）

一，数据循环：特别要注意作用域

使用ng-repeat指令。

<div ng-app="myApp" ng-controller="myCtrl">

    <ul>

        <li ng-repeat="x in names">{{x}}</li>

    </ul>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.names=["金角大王","银角大王","红孩儿"];

});

</script>

二：angularJs控制器

1.AngularJS 应用程序被控制器控制。
2.ng-controller 指令定义了应用程序控制器。

控制器使用方法：

<div ng-app="myapp" ng-controller="myctrl">

    姓：<input type="text" ng-model="xing"><br>

        名：<input type="text" ng-model="ming">

        <h1>你的姓名是：{{xing+""+ming}}</h1>

    <h2>好孩子：{{aaa()}}</h2>

</div>

<script>

    var app=angular.module("myapp",[]);

    app.controller("myctrl",function($scope){

         $scope.xing="孙";

         $scope.ming="悟空";

         $scope.aaa=function(){

            return $scope.xing+$scope.ming+“喜欢吃香蕉";

        }

    })

</script>

接下来咱来解析一下这个案例：

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
AngularJS 指令用于定义一个控制器:ng-controller="myctrl" 
myctrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (xing 和 ming)。
ng-model 指令绑定输入域到控制器的属性（xing 和 ming）.

三，DOM指令。

1，ng-disabled指令：直接绑定应用程序数据到HTML的disabled属性。

<body ng-app="myapp" ng-controller="mctrl">

        <input type="button" value="下一步" ng-disabled="!mm"/>

        <input type="checkbox" ng-model="mm"/>

    </body>

        <script type="text/javascript">

            var app=angular.module('myapp',[]);

            app.controller('mctrl',function ($scope) {});

        </script>

2，ng-hide指令（隐藏元素）

<body ng-app="myapp" ng-controller="myctrl">

        <input type="checkbox" ng-model="mm" />隐藏

        <div ng-hide="mm">

            <h4>八百标兵奔北坡</h4>

        </div>

    </body>

    <script type="text/javascript">

        var app=angular.module('myapp',[]);

        app.controller('myctrl',function ($scope) {})

    </script>

3，ng-show指令：根据value的值来显示（隐藏）HTML元素；可以使用表达式来计算布尔值（true或false）。

<body ng-app="myapp" ng-controller="myctrl">

        <input type="checkbox"  ng-model="mm"/>显示

        <div id="" ng-show="mm">

            <h2>窗前明月光</h2>

        </div>

    </body>

    <script type="text/javascript">

        var app=angular.module('myapp',[]);

        app.controller('myctrl',function ($scope) {})

    </script>

4,angularJs显示隐藏

（1）ng-hide 指令用于设置应用部分是否可见。
         ng-hide="true" 设置 HTML 元素不可见。
         ng-hide=“false” 设置 HTML 元素可见。
（2）ng-show 指令可用于设置应用中的一部分是否可见 。
       ng-show="false" 可以设置 HTML 元素 不可见。 
       ng-show="true" 可以以设置  HTML 元素可见。

转

angularJS（5）的更多相关文章

  1. angularJS（6）

    angularJS(6) 一:angularJs的事件. 1.ng-click指令定义了AngularJS点击事件. <div ng-app="myapp" ng-contr ...

  2. angularJS（4）

    angularJS(4) 一:angulaJs的作用域scope Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.scope 是一个 JavaScr ...

  3. angularJS（3）

      angularJS(3) 一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email ...

  4. angularJS（2）

    angularJS(2) 今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl&q ...

  5. AngularJS（1）

    AngularJS(1) 在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优 ...

  6. 学习笔记-AngularJs（十）

    前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...

  7. 学习笔记-AngularJs（九）

    到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

  8. 学习笔记-AngularJs（七）

    在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json ...

  9. 学习笔记-AngularJs（六）

    在学习笔记-AngularJs(五),通过引入bootstrap.css进行改写整个样式,这时学习项目也变得好看多了,现在我们又需要目录再进行一次改变,如下图: 这样就符合之前讲的对学习目录进行布置了 ...

随机推荐

  1. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  2. Java多线程基础学习（二）

    9. 线程安全/共享变量——同步 当多个线程用到同一个变量时,在修改值时存在同时修改的可能性,而此时该变量只能被赋值一次.这就会导致出现“线程安全”问题,这个被多个线程共用的变量称之为“共享变量”. ...

  3. HTTP协议系列(1)

    一.为什么学习Http协议       首先明白我们为什么学习HTTP协议,也就是说明白HTTP协议的作用.HTTP协议是用于客户端与服务器之间的通讯.明白了HTTP协议的作用也就知道了为什么要学习H ...

  4. “不给力啊，老湿！”：RSA加密与破解

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 加密和解密是自古就有技术了.经常看到侦探电影的桥段,勇敢又机智的主角,拿着一长串毫 ...

  5. JavaScript Math和Number对象

    目录 1. Math 对象:数学对象,提供对数据的数学计算.如:获取绝对值.向上取整等.无构造函数,无法被初始化,只提供静态属性和方法. 2. Number 对象 :Js中提供数字的对象.包含整数.浮 ...

  6. 【开源】分享2011-2015年全国城市历史天气数据库【Sqlite+C#访问程序】

    由于个人研究需要,需要采集天气历史数据,前一篇文章:C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子),介绍了基本的采集思路和核心代码,经过1个星期的采集,历史数据库 ...

  7. 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. 【开源】.Net 动态脚本引擎NScript

    开源地址: https://git.oschina.net/chejiangyi/NScript 开源QQ群: .net 开源基础服务  238543768 .Net 动态脚本引擎 NScript   ...

  9. Android公共title的应用

    我们在开发Android应用中,写每一个页面的时候都会建一个title,不是写一个LinearLayout就是写一个RelativeLayout,久而久之就会觉得这样繁琐,尤其几个页面是只是标题不一样 ...

  10. iOS controller解耦探究实现——第一次写博客

    大学时曾经做过android的开发,目前的工作是iOS的开发.之前自己记录东西都是通过自己比较喜欢的笔记类的应用记录下了.直到前段时一个哥们拉着我注册了一个博客.现在终于想明白了,博客这个东西受众会稍 ...