发表于： 2017-04-26 23:39:22
1 1043
今天完成的事：
今天主要理解一波双向数据绑定
dome
- <html ng-app="phonecatApp">
- <head>
- ...
- <script src="lib/angular/angular.js"></script>
- <script src="js/controllers.js"></script>
- </head>
- <body ng-controller="PhoneListCtrl">
- <ul>
- <li ng-repeat="phone in phones">
- {{phone.name}}
- <p>{{phone.snippet}}</p>
- </li>
- </ul>
- </body>
- </html>
- <html ng-app="phonecatApp">
- <head>
- <script src="lib/angular/angular.js"></script>
- <script src="js/controllers.js"></script>
- </head>
- <body ng-controller="PhoneListCtrl">
- <ul>
- <li ng-repeat="phone in phones">
- {{phone.name}}
- <p>{{phone.snippet}}</p>
- </li>
- </ul>
- </body>
- </html>
ng-repeat，其实就是一个列表标签符号，类似Struts的logic:iterator之类。告诉Angular为列表每一行创建一个 <li> 开头的元素
- var phonecatApp = angular.module('phonecatApp', []);
- phonecatApp.controller('PhoneListCtrl', function ($scope) {
- $scope.phones = [
- {'name': 'Nexus S',
- 'snippet': 'Fast just got faster with Nexus S.'},
- {'name': 'Motorola XOOM™ with Wi-Fi',
- 'snippet': 'The Next, Next Generation tablet.'},
- {'name': 'MOTOROLA XOOM™',
- 'snippet': 'The Next, Next Generation tablet.'}
- ];
- });
- 为作用域$scope定义了一个phones 列表数组，分别可以用{{phone.name}}和{{phone.snippet}}取出。
- angular
- 今天学的比较少久做一个最近一段时间的用法总结一下
- 校验语法之ng-trim ng-minlength ng-maxlength required ng-pattern 等标签
表单中的输入框，你可以使用上面的标签来实现对用户输入的校验。
从字面意思上你已经知道了它们的意思。
<form name=”yourForm”>
<input type=”text” name=”inputText” required ng-trim=”true” ng-model=”userNum” ng-pattern=”/^[0-9]*[1-9][0-9]*$/” ng-maxlength=”6〃 maxlength=”6〃/>
</form>
你可以通过 $scope.yourForm.inputText.$error.required 来判断输入框是否为空
你可以通过 $scope.yourForm.inputText.$invalid 来判断输入的内容是否满足ng-pattern，ng-maxlength，maxlength
你通过$scope.userNum获得的输入内容是去掉前后空白的，因为ng-trim的存在。
下拉框之ng-options标签
ng-options是为下拉框专门打造的标签。
<select ng-model=”yourSelected” ng-options=”person.id as person.name in persons”></select>
下拉框中显示的是person.name，当你选中其中一个的时候，你可以通过yourSelected得到你选中的person.id.
控制css之ng-style标签
ng-style帮你轻松控制你的css属性
<span ng-style=”myColor”>your color</span>
你可以通过给myColor赋值的形式来改变你想要的效果，就像这样：
$scope.myColor={color:’blue’};
$scope.myColor={cursor: ‘pointer’,color:’blue’};
异步请求之$http对象。
AngularJS 提供了一个类似jquery的$.ajax的对象，用于异步请求。
在AngularJS中对异步操作是推崇至极的，所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。
$http({method : ‘POST’,params : { id:123}, data:{name:’john’,age:27}, url : “/mypath”})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});
如果你是POST请求，params里的数据会帮你拼到url后面，data里的数据会放到请求体中。 - 明天计划的事：完成任务8
- 遇到的问题：
- 由于之前的表单验证一直未能实现，今天研究了一波，主要还是因为我引入angular-js或者ng-message版本有问题，导致一直未能实现，今天做了重新下了angularjs ,ng-message 完美解决。
- 收获：
- 如上所述。
返回列表
评论