一,数据循环:特别要注意作用域
使用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 元素可见。