最近学习angular,简单总结下
1. ng-app:声明angular的边界
<html ng-app=“myApp”> 这样就是告知angular去管理整个页面的内容
<div ng-app=“myApp”> 用angular管理某一部分的代码
需要在script中写好对应的angular app
var app = angular.module('myApp', []);
通过 app.controller实现其他功能
2. MVC
view就是html实现的,里面的内容可以用{{}}双花括号插值语法
controller 就是我们写的js中的function,需要参数:$scope ,告知angular这个模型中都有哪些对象和基本数据。
一般在html的tag中注明:<div ng-controller='myCon'>
model 一般我们会在controller里加入model,一般通过,$scope.message={},把内容赋给message即可。
代码示例:
<div ng-app="myApp" ng-controller="MyController">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.firstName = "Max";
$scope.lastName = "Chart";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
想展示回来的数据,必须是作为$scope的一个属性,才能回显,并以属性名直接调用即可。
3. 关于双花括号,与ng-bind
<p>{{greeting}}</p>
<p ng-bind='greeting'></p>
上面这两种显示结果是一样的,但是如果在第一次获取数据的时候,第一种可能未被渲染好,因而显示双花等,体验不好,而第二种则不会出现任何显示。所以,在index.html中一般用bind,其他场景下,多使用双花。
4. angular中的过滤器
angular中可以使用‘|’ 声明过滤器
currency: {{food.price|currency}} $100.00 会自动显示出美元符号
uppercase,lowercase 用法与上面类似,就是说明这个字符是大写的还是小写的。
orderBy:'sth':常与ng-repeat联合使用,以sth为索引,升序排列结果。
filter:flmodel 常与各种表单元素连用,input,select checkbox等。flmodel为模型名称
例子:结果如右图
<body ng-controller='filtercon'><h1>filter test</h1>
<p><input ng-model="fl"></p>
<div ng-repeat="pr in people|filter:fl|orderBy:'city'">
<span>{{pr.name|uppercase}} in </span>
<span>{{pr.city}}</span>
</div>
</body>
5.表单相关问题
a.
b.