AngularJS 内置指令
凡是以 ng- 开始的都成为内置指令
- 用于表示一个angular应用, Angular 会从ng-app所在的标签开始,管理这个应用.
- 一个页面(应用)中,建议只存在一个ng-app ,如果有多个,需要手动对应的应用.
ng-init: 初始化数据
ng-init="a=b;c=d;..." 挂载在根上 开发正式项目时,不建议使用ng-init 做数据初始化 应该交由controller去完成 (也可以声明数组和对象)
ng-model:模块
ng-model:将(表单)视图与模型进行(双向)绑定, 其中一个改变另一个相应发生改变 做到动态变化
ng-repeat: 遍历对象
遍历数组: ng-repeat="x in arr"
遍历对象: ng-repeat="(key,val) in obj"
属性:$first 是否为第一项,$last 是否为最后一项, $middle 是否为中间值(非首和尾), $index下标值
***angular需要一个不重复的值去跟踪数据的变化, 当数组内有重复时,将导致angular无法正常跟踪对应的值, 需要使用 track by $index 为遍历指定一个唯一不重复值
<html class="no-js" ng-app=""> //注意点1
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./angular.min.js">
</script>
</head>
<body>
//ng-init初始化数据
<div ng-init="name='sang';age=24;arr=['a','b','c'];obj={name:'sang',age:'24',
};items=[{
name:'iphone',
price:5000},{name:'小米',
price:3999}];as=[1,2,3,4,4,5,5]">
<input type="text" ng-model="name">
<input type="text" ng-model="arr" >
<ul>
<li ng-repeat="x in arr">{{ x }}</li>//遍历数组
</ul>
<h3 ng-repeat="(key,val) in obj">{{ key +"-"+ val}}</h3>遍历对象
<ul>
<li ng-repeat="x in arr">{{x+"-"+$first+"-"+$last+"-"+$middle+"-"+$index}} </li>
</ul>
<p ng-repeat="item in items">{{item.name+"-"+item.price}} </p>
<p ng-repeat="x in as track by $index">{{x}}</p>
</div>
</body>
</html>```
####ng-class 为元素指定样式名
1. ng-class="{true:'class1',false:'class2'}[bol]" 由 bol 决定添加哪个样式
2. ng-class = "{'class1':bol1,'class2':bol2,'classN':bolN}"由各个变量 是否添加指定的样式
####ng-style 委员书添加样式
示例:ng-style="{style:style}"
ng-show 是否显示元素 true显示 false隐藏
ng-show 为false时, 只是为元素添加一个优先级最高的disp:none
ng-if 是否显示元素 ng-if 为false时 ,会将元素从DOM树中 移除 当元素需要反复显示隐藏时 , 使用ng-show 当只显示一次便不在使用的元素,使用ng-if
ng-click 单机事件 (所有的DOM标准事件都是这种形式书写)
ng-bind 可以解决{{}}表达式造成的原样输出问题(后引入脚本)
网友评论