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 元素可见。

转

转载于:https://www.cnblogs.com/alinaxia/p/6241031.html

angularJS（5）相关推荐

学习笔记-AngularJs（十）
前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...
如何在 ASP.NET MVC 中集成 AngularJS（2）
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
精通AngularJS（三）深入scope，继承结构，事件系统和生命周期
深入探讨 Scope 作用域每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构让 ...
AngularJS（1）——AngularJS指令机制
About 关于angularjs的指令学习,小编看了imooc的视频然后翻墙到外面看文章(边看边Google翻译,好好学英语吧骚年们),然后回来写一个总结,写我看到的,写我听到的. ...
学习笔记-AngularJs（四）
之前学习的事视图与模版,我们在控制器文件中直接定义一个数组,让其在模版文件中用ng-repeat指令构造一个迭代器,定义的数组http://t.cn/RUbL4rP如同以下: $scope.phone ...
AngularJS（九）：路由
本文也同步发表在我的公众号"我的天空" AngularJS路由 AngularJS路由可以让我们通过不同的URL访问不同页面(似乎是废话),其价值主要体现在单页面的web应用中(s ...
AngularJS（2）——AngularJS数据双向绑定
双向绑定 AngularJS在$scope变量中使用脏值检测来实现了数据双向绑定. Scope作用: 1.通过数据共享连接Controller和View 2.事件的监听和响应 3.脏值检测和数据绑 ...
AngularJS（1）——入门学习
AngularJs相关概念在w3schools中针对AngularJs的介绍为: AngularJS extends HTML with new attributes. AngularJS is p ...
【AngularJS】—— 2 初识AngularJs（续）
前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容. 本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括: 1 事件 2 模块 3 表单 4 ...

angularJS（5）

angularJS（5）相关推荐

最新文章

热门文章