标签：分享 数据 image name 部分 control bsp tool dom
一，数据循环：特别要注意作用域
使用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 元素可见。
转
标签：分享 数据 image name 部分 control bsp tool dom
原文地址：http://www.cnblogs.com/alinaxia/p/6241031.html
