angular 学习笔记 (1) -- 双向数据绑定和表单验证

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_30486037

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量194

点赞数

文章标签： javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/weihuan/p/7044409.html

版权

听说ng的主要功能：MVC模型，模快化，自动双向数据绑定和指令系统。

一：这个是ng的双向数据绑定，入门级别的代码。

1 <!--
2 所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中
3 ng-app是ng的入口，表示当前元素的所有指令都会被angular管理（对每一个指令进行分析和操作）
4 -->
5 <!--ng-init 初始化-->
6 <body ng-app ng-init="mvp='westbrook'">
7     <p><input type="text" placeholder="谁是mvp" ng-model="mvp"></p>
8     <p>2017nba常规赛mvp得主：{{mvp}}</p>
9 </body>

二：用控制器controller做一个简单的表单验证（即时验证）。

 1 // 创建一个模块
 2     var app = angular.module('HelloApp', []);
 3     // 为这个模块创建一个控制器
 4     app.controller('WorldController', ['$scope', function($scope) {
 5       // 数据
 6       $scope.user = {
 7         username: '',
 8         password: ''
 9       };
10       $scope.demo = '';
11       // 请输入用户名  输入格式不合法
12       $scope.message = '请输入用户名';
13       // 行为数据
14       $scope.login = function() {
15         // 因为数据的变化时双向的同步，所以界面上的值变化会同步到$scope.user上
16         console.log($scope.user);
17       };
18 
19       // $scope.message取决于$scope.user
20       // 官方的API中提供了一个$scope.$watch方法，
21       $scope.$watch('user.username', function(now, old) {
22         // 当user.username发生变化时触发这个函数
23         // console.log('now is ' + now);
24         // console.log('old is ' + old);
25         if (now) {
26           if (now.length < 7) {
27             $scope.message = '输入格式不合法';
28           } else {
29             $scope.message = '';
30           }
31         } else {
32           $scope.message = '请输入用户名';
33         }
34       });
35     }]);

html代码：

 1 <table border="1"  ng-app="HelloApp" ng-controller="WorldController">
 2     <tr>
 3         <td>用户名</td>
 4         <td>
 5             <input type="text" ng-model="user.username">
 6         </td>
 7     </tr>
 8     <tr>
 9         <td>密码</td>
10         <td>
11             <input type="password" ng-model="user.password">
12         </td>
13     </tr>
14     <tr>
15         <td></td>
16         <td>
17             <input type="button" ng-click="login()" value="登陆">
18         </td>
19     </tr>
20     <tr>
21         <td></td>
22         <td>{{message}}</td>
23     </tr>
24 </table>