Angularjs学习⽂档
Angular js 指令：
ng-app=””  初始化⼀个Angularjs应⽤程序
ng-init=”key=value” 在其中使⽤键值对定义数据
{{key}} 在html中使⽤key调⽤数据
ng-bind=”key” 可以在标签中使⽤此⽅法调⽤数据 相当于append
ng-model 把元素值绑定到应⽤程序 ⼀般出现在⽂本框中 定义key 然后把输⼊的值显⽰
Ng-model同样可以为应⽤程序数据提供类型验证、为应⽤程序提供状态、为html元素提供css类、绑定html元素到html表单Ng-repeat 循环数组  把数组中的元素循环放在html中 相当于for
页⾯代码：
<div ng-app="myApp" ng-controller="personCtrl">
名：<input type="text" ng-model="firstname" name="name" value=" " /><br />
姓：<input type="text" ng-model="lastname" name="name" value=" " /><br />
<br />
姓名{{fullname()}}
</div>
AngularJs代码：
var app = dule("myApp", []);
$scope.firstname = "John";
$scope.lastname = "Doe";
$scope.fullname = function () {
return $scope.firstname + " " + $scope.lastname;
}
})
其中 app是anjularjs的作⽤域
var app = dule('myApp', []);
$Url = $location.absUrl();
});
通过内建的$location服务获取当前页⾯的URL
<script>
var app = dule('myApp', []);
$http.post("/Home/ReturnJson")
.success(function(response) {$scope.num = respose.data;
});
})
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<td>编号</td>
<td> 姓名</td>
<td>年龄</td>
</tr>
<tr ng-repeat="x in num">
<td> {{x.ID}}</td>
<td> {{x.Name}}</td>
<td> {{x.Age}}</td>
</tr>
</table>
</div>
通过get/post 获取后台的数据 然后通过ng-repeat循环遍历数据放⼊页⾯相当于使⽤ajax获取数据 然后通过拼接字符串放⼊Dom节点中（推荐使⽤）
<script>
var app = dule('myApp', []);
$Header = "Hello World";
$timeout(function() {
$Header = "How are you today?";
},2000)
})
</script>
$timeout 访问在规定的毫秒数后执⾏指定函数。
<script>
var app = dule('myApp', []);
$interval(function() {
$scope.theTime = new Date().toLocaleTimeString();
},1000)
})
</script>
$interval 访问在指定的周期(以毫秒计)来调⽤函数或计算表达式。
app.service('change', function () {
String(16);
}
});
$scope.hex = Func(255);
})
⾃定义服务并调⽤ change：服务名称 myFunc：服务具体执⾏函数
页⾯中使⽤多个angular js 在<body>中加⼊ng-app 在<div>中加⼊ng-controller
app.service('change', function () {
String(16);
}
});
app.filter('myFormat', ['change', function (change) {
return function (x) {
Func(x);
}
}]);
$unts = [255, 251, 200];
});
<div ng-controller="myCtrl1">
<ul ng-repeat="y in counts">
<li>{{y|myFormat}}</li>
</ul>
</div>
通过filter创建验证 myFormat为验证名称 change为验证⽅法名称 myFunc为具体验证⽅法
通过{{y|myFormat}}使⽤
<select ng-model="selectedName" ng-options="x for x in json"></select> 通过此⾏代码代码可以将数据绑定到下拉框<select ng-model="selectedsite" ng-options="x.site for x in json"></select>绑定json
angularjs表格：
angular和angularjs可以通过orderBy过滤器进⾏排序
使⽤{{$index+1}}作为序号
使⽤$even和$odd可以进⾏按⾸字母顺序排列
表单验证：使⽤ng-show显⽰验证信息 验证属性如下：
angular js api

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。