angularJS 总结:
核心:只关心数据,完全不关心ui 的事
0、angularJS程序基本结构
– ng-app 确定angularJS 接管的范围(子元素)
– ng-model 数据模型(双向绑定)
– ng-bind 输出
– {{}} 输出
0.1、angularJS表达式
– {{表达式}} 是ng 自己的一套解析程序,不完全和js 一样
– ng 和 js 表达式 不 互通(ng 变量 都是 $scope 的一部分)
– 数据初始化:ng-init = “名字:值;名字:值”
1、class 两种写法
– 直接写:class = “{{xxx}}”
– 数组:ng-class = “arr”
<style>
.class1{width:200px;height:30px;}
</style>
<div ng-app="" ng-init="class1='class1';arr=['class1'];">
<p>名字 : <input class="{{class1}}" type="text" ng-model="name"></p>
<p>名字 : <input ng-class="arr" type="text" ng-model="name"></p>
</div>
2、style 两种写法
– 直接写:style = “{{xxx}}”
– json:ng-style = “json”
<div ng-app="" ng-init="style = 'width:200px;height:30px;';json = {width:'100px',height:'100px'}">
<p>名字 : <input style="{{style}}" type="text" ng-model="name"></p>
<p>名字 : <input ng-style="json" type="text" ng-model="name"></p>
</div>
3、ng-if,ng-show,ng-hide
– ng-if 真正的删除元素
– ng-show 显示/隐藏元素
– ng-hide 显示/隐藏元素
– {{三目 ? 条件成立 : 条件不成立}}
4、事件 ng-xxx 例如:ng-click
5、循环
– ng-repeat = “value in arr/json”
– ng-repeat = “(key,value) in arr/json”
– ng-repeat 和 ng-事件、赋值,同时出现在同一元素上可能会出问题
e.g:
<input type = "button" ng-repeat = "v in arr" ng-click="a = a + 1">
解决办法为:ng-事件 中不要直接用表达式,而是用controller 中定义的函数
e.g:
<input type = "button" ng-repeat = "v in arr" ng-click="fn()">
6、$scope 作用域对象
可添加、可获取
可监视:
$scope.$watch("名称",function(){
// 监视到数据变了,干什么
},深度监视);
7、$http数据交互
$http.get(url,{params:{xxx:'yyy',aaa:'bbb'}})
.success(function(数据){})
.error(function(){});
$http.post....
$http.jsonp(url,{params:{...,cb:'JSON_CALLBACK'}})
.success(function(数据){})
.error(function(){});