1、 优点:数据自动更新
2、 初始化(添加Angular使用所必须的模块):
a) angular在启动时,会设置全局的angular对象,然后在angular对象上发布module这个API
b) 引用angularJS:<scriptsrc="angular.min.js"></script>
c) var myApp =angular.module(name, [requires], [configFn]);
name:字符串类型,代表模块的名称;
requires:字符串的数组,代表该模块依赖的其他模块列表,如果不依赖其他模块,用空数组即可;
configFn:用来对该模块进行一些配置。
d) 指令ng-app定义AngularJS的作用域
3、 If
Angular:ng-if
<div ng-if="checked">content</div>
.NET:if
@if(checked){
<div >content</div>
}
4、赋值
Angular:
ng-model:是$scope<-> view的双向绑定,控制器中可以直接获取到值的变化
列:
$scope.productData ="userName" ;
$scope.items=[];//5、Foreach循环遍历使用
$scope.LoadItems = function() {
$http.post('/home/getDate’)
.success(function(data, status, headers, config) {
if(data) {
$scope.items= data;//赋值
}
}else { toastr["error"]("", "");}
})
.error(function(data, status, headers, config) {
toastr["error"]("", "");
});
};
<input type="text"ng-model="productData" />
//双向绑定:productData初始值为"userName",当input框里面的内容修改时$scope.productDat里面的内容也会自动更改,界面上显示的内容{{productData}}也会自动更新
ng-bind:是从$scope-> view的单向绑定,用于展示数据的
列:
<span ng-bind="productData"></span>或{{productData}}
.NET:
Public string productData="userName";
Public list<Model> items=new List<Model>();
Js:
<input type="text" id="inputData"/>
<span id="spanData"></span>
Var productData="userName";
$("#inputData").val(productData);
$("#spanData").val(productData);
$("#inputData").change(function(){
productData=$("#inputData").val();
$("#spanData").val(productData);
})//jq为动态赋值,而Angular中申明的$scope.productData为如.net中的全局变量,当修改后会全局更新
5、 Foreach循环遍历:(angular.forEach)
angular.forEach(obj, iterator, [context])
obj :被迭代的对象(Object Array).
iterator :迭代函数(Function)
context(optional) :循环后读取出来的值(Object)
例:
1、界面遍历
Angular:ng-repeat
<tr ng-repeat="item in items">
<td>{{$index + 1}}</td>//$index显示第几行,从0开始
<td><input type="text" ng-model="item.name"/></td>//8.数据提交
<td>{{item.quantity * item.price | currency: '¥' }}</td>// currency: '¥'数字格式化为货币,默认是美元符号,如转换时间为“date : 'yyyy-MM-dd hh:mm:ss EEEE'”
<td><buttonng-click="remove($index)">Remove</button></td>//6、删除使用
</tr>
.NET:foreach
@foreach (Model item in items){
Var index =0;
<tr>
<td>@(++index)</td>
<td><input type="text" value="@item.name"/></td>
<td>@(item.quantity * item.price)</td>
<td><buttonοnclick="remove(this)">Remove</button></td>
</tr>
}
2、js
Angular:angular.forEach
function button1(){
var values = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(values, function(value, key){this.push(key + ': ' + value);}, log);
alert(log);
}
Jq:each
$.ajax({
var values = {name: 'misko', gender: 'male'};
var log = [];
values.each(function(i,val) {
log.push(key + ': ' + value);
});
callback(log);
});
6、删除
Angular:remove
<buttonng-click="remove($index)">Remove</button>
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
.NET:remove
Var remove=function(){
this.parent().parent().remove();
}
7、 Switch
Angular:ng-switch
<div ng-switchon="isExists(item)">
<spanng-switch-when="true">true</span>
<spanng-switch-default>false</span>
</div>
.NET:switch
@switch (item)
{
case true :<span>Available</span>
default :<span>false</span>
}
8、 数据提交
Angular:post
提交整个list<Model>到后台
$scope.LoadCurrencyData = function() {
$http.post("/home/index",$scope.items).success(function(data){
$scope.items=data;
}).error(function(data){
console.log("失败");
});
};
Jq:post
var addresslist = new Array();
var r =document.getElementsByName("list");
for (var i = 0; i <r.length; i++) {
var address = newArray();
address['name'] =$(r[i]).attr("iname");
addresslist.push(address);
}
$.post("/home/index", addresslist,function(data) {
if(result.Code == 100) {
} else {}
});