angularjs-指令ng-disable,ng-repeat,ng-checked

前端之家收集整理的这篇文章主要介绍了angularjs-指令ng-disable,ng-repeat,ng-checked前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
#ng-disable禁用标签
<!DOCTYPEhtml>
<html>
<head>
<Metacharset="utf-8"/>
<title></title>
<scriptsrc="js/angular.min.js"></script>
</head>
<body>
<divng-app="app"ng-controller="ctrl">
同意:<inputtype="checkBox"ng-model="status"ng-init="status=0"/><br/>
<inputtype="button"value="登陆"ng-disabled="!status"/>
</ul>
</div>

<scripttype="text/javascript">
varm=angular.module('app',[]);
m.controller('ctrl',['$scope',function($scope){
}]);

</script>
</body>
</html>
#ng-repeat标签,遍历对象
<!DOCTYPEhtml>
<html>
<head>
<Metacharset="utf-8"/>
<title></title>
<scriptsrc="js/angular.min.js"></script>
</head>
<body>
<divng-app="app"ng-controller="ctrl">
<ul>
<ling-repeat="dinodata">
mynameis{{d.name}},iam{{d.age}}
</li>
</ul>
</div>

<scripttype="text/javascript">
varm=angular.module('app',function($scope){
$scope.odata=[
{'name':'cxiong','age':29},{'name':'xmzhang','age':29}
]
}]);

</script>
</body>
</html>

#ng-repeat标签,遍历数组
<!DOCTYPEhtml>
<html>
<head>
<Metacharset="utf-8"/>
<title></title>
<scriptsrc="js/angular.min.js"></script>
</head>
<body>
<divng-app="app"ng-controller="ctrl">
<ul>
<!--报错:数组中存在重复元素,trackby$index-->
<ling-repeat="dinodatatrackby$index">
mynameis{{d}}
</li>
</ul>
</div>

<scripttype="text/javascript">
varm=angular.module('app',function($scope){
$scope.odata=['xmzhang','cxiong','fjwu','cxiong']
}]);

</script>
</body>
</html>
#ng-checked实现全选和反选
<!DOCTYPEhtml>
<html>
<head>
<Metacharset="utf-8"/>
<title></title>
<scriptsrc="js/angular.min.js"></script>
</head>
<body>
<divng-app="app"ng-controller="ctrl">
<tableborder=""cellspacing=""cellpadding="">
<tr>
<th><inputtype="checkBox"ng-checked="status"ng-model="status"/>{{status}}</th>
<th><span>{{status?'取消':'全选'}}</span></th>
</tr>
<trng-repeat="dinodatatrackby$index">
<td><inputtype="checkBox"ng-checked="status"/></td>
<td>{{d}}</td>
</tr>
</table>
</div>

<scripttype="text/javascript">
varm=angular.module('app',function($scope){
$scope.status=true
$scope.odata=['xmzhang','cxiong']
}]);

</script>
</body>
</html>
原文链接:https://www.f2er.com/angularjs/146481.html

猜你在找的Angularjs相关文章