当前位置:   article > 正文

AngularJs中的双向向数据绑定(MVVM)与表单处理相关指令_在angularjs中,mvvm中哪两个部分实现了双向绑定

在angularjs中,mvvm中哪两个部分实现了双向绑定

一、什么是双向数据绑定?

AngularJs有一个很强大的功能就是双向数据绑定,即MVVM,什么是双向数据绑定呢?

在一般的应用当中,后端给前端返回数据,前端数据发生改变,如果不做表单或者是ajax数据提交,这些数据是不会及时返回给后端的,也就是单向数据绑定,而AngularJs能做到双向数据绑定,数据从模型->视图->视图->模型,这样一个过程,看下面这段代码:

01 <!doctype html>
02 <html lang="en">
03     <head>
04         <meta charset="UTF-8">
05         <title>Document</title>
06         <meta name="Keywords" content="">
07         <meta name="Description" content="">
08         <style type="text/css">
09             .ng-cloak{display:none;}
10         </style>
11     </head>
12     <body ng-app='app' ng-controller='ctrl' ng-cloak class="ng-cloak">
13         <input type="text" ng-model='name' />
14         <h1>{{name}}</h1>
15     </body>
16 </html>
17 <script type="text/javascript" src="../js/angular.min.js"></script>
18 <script type="text/javascript">
19     var m = angular.module('app', []);
20     m.controller('ctrl', ['$scope'function($scope){
21         $scope.name= 'K`illCode';
22     }]);
23 </script>

当你手动改变input中的值的时候,发现h1标签里的文字也会发生改变,这就是双向数据绑定。

ng-model结合ng-value实现的双向数据绑定小实例,这两个指令只能用于input表单:

01 <!doctype html>
02 <html lang="en">
03     <head>
04         <meta charset="UTF-8">
05         <title>Document</title>
06         <meta name="Keywords" content="">
07         <meta name="Description" content="">
08         <style type="text/css">
09             .ng-cloak{display:none;}
10         </style>
11     </head>
12     <body ng-app='app' ng-controller='ctrl' ng-cloak class="ng-cloak">
13         <p>名称:<input type="text" ng-model="goods.data.name" /></p>
14         <p>价格:<input type="text" ng-model="goods.data.price" /></p>
15         <p>数量:<input type="text" ng-model="goods.data.num" /></p>
16         <p>总价:<input type="text" ng-value="goods.data.price*goods.data.num" /></p>
17     </body>
18 </html>
19 <script type="text/javascript" src="../js/angular.min.js"></script>
20 <script type="text/javascript">
21     var m = angular.module('app', []);
22     m.controller('ctrl', ['$scope'function($scope){
23         $scope.goods = {
24             data : {
25                 'name' 'K`illCode的AngularJs学习笔记',
26                 'price' '100',
27                 'num' : 1
28             }
29         };
30     }]);
31 </script>

二、双向数据绑定在input单选框表单中的应用:

直接用AngularJs实现这个功能,如果单选框status的值是1,说明网站正常运行,提示文字隐藏,如果status的值是0,说明网站出故障,提示文字显示。

01 <!doctype html>
02 <html lang="en">
03     <head>
04         <meta charset="UTF-8">
05         <title>Document</title>
06         <meta name="Keywords" content="">
07         <meta name="Description" content="">
08         <style type="text/css">
09             .ng-cloak{display:none;}
10         </style>
11     </head>
12     <body ng-app="app" ng-controller="ctrl">
13         开启:<input type="radio" name="status" ng-model="status" value="1" checked />
14         关闭:<input type="radio" name="status" ng-model="status" value="0" />
15         {{status}}
16         <div ng-show="status==0">
17             网站正在维护中,1小时后重新开启!
18         </div>
19     </body>
20 </html>
21 <script type="text/javascript" src="../js/angular.min.js"></script>
22 <script type="text/javascript">
23     var m = angular.module('app', []);
24     m.controller('ctrl', ['$scope'function($scope){
25         $scope.status = 1;
26     }]);
27 </script>

ng-show这个指令,如果是true,则所在标签显示,如果是false,则所在标签隐藏。

三、双向数据绑定在input复选框表单中的应用:

比如有玩游戏和看电影两个选项,它们各自被选中之后,各自对应的textarea文本框就显示,否则就隐藏。

01 <!doctype html>
02 <html lang="en">
03     <head>
04         <meta charset="UTF-8">
05         <title>Document</title>
06         <meta name="Keywords" content="">
07         <meta name="Description" content="">
08         <style type="text/css">
09             .ng-cloak{display:none;}
10         </style>
11     </head>
12     <body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
13         <p>
14             <label>游戏:</label>
15             <input type="checkbox" ng-model="choose.game" ng-true-value="1" ng-false-value="0" />
16         </p>
17         <p>
18             <label>电影:</label>
19             <input type="checkbox" ng-model="choose.movie" ng-true-value="1" ng-false-value="0" />
20         </p>
21         <textarea ng-show="choose.game==1">玩游戏</textarea>
22         <textarea ng-show="choose.movie==1">看电影</textarea>
23     </body>
24 </html>
25 <script type="text/javascript" src="../js/angular.min.js"></script>
26 <script type="text/javascript">
27     var m = angular.module('app', []);
28     m.controller('ctrl', ['$scope'function($scope){
29         $scope.choose = {
30             'game' : 0,
31             'movie' : 0
32         };
33         $scope.a = 0;
34     }]);
35 </script>

可以自定义checkbox被选中或取消选中之后的value值,ng-true-value表示选中之后的value值,ng-false-value表示取消选中之后的value值。

四、双向数据绑定在select下拉列表框中的应用:

比如选择某个城市:

01 <!doctype html>
02 <html lang="en">
03     <head>
04         <meta charset="UTF-8">
05         <title>Document</title>
06         <meta name="Keywords" content="">
07         <meta name="Description" content="">
08         <style type="text/css">
09             .ng-cloak{display:none;}
10         </style>
11     </head>
12     <body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
13         <select ng-options="v.value as v.name for v in data" ng-model="city">
14             <option value="">---请选择城市---</option>
15         </select>
16     </body>
17 </html>
18 <script type="text/javascript" src="../js/angular.min.js"></script>
19 <script type="text/javascript">
20     var m = angular.module('app', []);
21     m.controller('ctrl', ['$scope'function($scope){
22         //$scope.city = 'guangzhou';
23         $scope.data = [
24             {
25                 'name' '北京',
26                 'value' 'beijing'
27             },
28             {
29                 'name' '上海',
30                 'value' 'shanghai'
31             },
32             {
33                 'name' '广州',
34                 'value' 'guangzhou'
35             }
36         ];
37     }]);
38 </script>
1 指令ng-options就是循环读取data数组中的json数据,v.value作为option的value值,v.name作为option的innerHTML。

默认的option比如请选择城市,一定要有value值,并且value值是空,这样就可以正常显示!

如果通过指令定义了$scope.city = 'shanghai',并且在select标签内加入了ng-model='city',那么在默认打开页面的时候,Angular会根据option中与预先定义的city相同的进行比较,然后默认选中那个选项。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/874530
推荐阅读
相关标签
  

闽ICP备14008679号