Angulajs是一个MVC前段框架,项目中使用Angulajs必须按照框架的写法编写代码,可以统一代码规范易于后期代码的维护。
M Model 模型-数据,V View 视图-表现层 HTML/CSS,C Controller 控制器-业务逻辑,M和V耦合性高,C特别臃肿编写大段的代码
Angular的核心是数据,一切问题从数据本身考虑。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="img/angular.js" charset="UTF-8"></script> </head> <body> <div ng-app=""> <input type="text" name="" value="" ng-model="a" > <div class="" ng-bind="a"></div> <select ng-model="a"> <option value="1">北京市</option> <option value="2">洛阳市</option> <option value="3">商丘市</option> </section> </div> </body> </html>
双向绑定 ng-model
数据变了<->视图变化(V <-> M)
自动同步数据和视图ng-model 双向绑定
ng-bind 输出数据
ng-app 被angularjs管理(将angularjs代码包在里面才管用)
angularjs的表达式 {{}}
ng-bind 和 {{}}一样也是用来绑定数据的,比ng-bind方便。
ng-init 用来初始化数据的
<!DOCTYPE html> <html ng-app=""> <head> <meta charset="utf-8"> <title></title> <script src="img/angular.js" charset="utf-8"></script> </head> <body ng-init="a=0;b=0;"> <input type="text" ng-model="a"> <input type="text" ng-model="b"> <span>{{a*b}}</span> </body> </html>
Angularjs遍历数组和·json对象
数组:
<!DOCTYPE html> <html ng-app=""> <head> <meta charset="utf-8"> <title></title> <script src="img/angular.js" charset="utf-8"></script> </head> <body ng-init="arr=[12,5,8,9,10,12,12]"> <ul> <li ng-repeat="item in arr track by $index">{{item}}</li>
// <li ng-repeat="item in arr>{{item}}</li>
</ul>
</html>
ng -repeat 遍历数组或者josn
问题:数组中一旦有重复的数据就无法遍历 ng -repeat 为了保证效率它需要key和value一一对应,需要每个元素有个单独的key,而数组没有key,所以吧数组的元素当成默认的key,数组中不能有重复的的元素,一旦重复就无法遍历了
解决:track by $index 它是吧数组的下标当成key了解决了问题效率不好, 因为只要插入或者添加一个元素数组的下标就会改变。
解决:track by $index 它是吧数组的下标当成key了解决了问题效率不好, 因为只要插入或者添加一个元素数组的下标就会改变。
json对象:
<!DOCTYPE html> <html ng-app=""> <head> <meta charset="utf-8"> <title></title> <script src="angular.js" charset="utf-8"></script> </head> <body ng-init="arr=[{user: '王五', age: 18}, {user: '张三', age: 23}, {user: '李四', age: 25}, {user: 'blue', age: 18}]"> <ul> <li ng-repeat="json in arr">姓名:{{json.user}},年龄:{{json.age}}</li> </ul> </body> </html>
json对象遍历不存在用ng-repeat的问题
json对象用ng-repeat遍历的方式
- <li ng-repeat="(k,v) in json">{{k}}, {{v}}</li> 取出key的值
- <li ng-repeat="val in arr">{{$index}}, {{val}}</li>
留言板实例
<!DOCTYPE html> <html ng-app=""> <head> <meta charset="utf-8"> <title></title> <script src="img/angular.js" charset="utf-8"></script> </head> <body ng-init="arr=[{name: '咸鱼', content: '大家好啊'}, {name: '张三', content: '挺好呀'}]"> 名字:<input type="text" name="" value="" ng-model="name"><br> 内容:<input type="text" name="" value="" ng-model="content"><br> <input type="button" value="提交" ng-click="arr.unshift({name: name, content: content})"> <ul> <li ng-repeat="json in arr"> <h4>{{json.name}}</h4> <p>{{json.content}}</p> </li> </ul> </body> </html>