AngularJs中的双向向数据绑定(MVVM)与表单处理相关指令

最新推荐文章于 2018-08-08 17:20:12 发布
最新推荐文章于 2018-08-08 17:20:12 发布
阅读量231 收藏
点赞数
分类专栏： angularJS 文章标签： angularJs

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

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相同的进行比较，然后默认选中那个选项。

K'illCode
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Angular的双向数据绑定(MV-VM)
08-31
在MVVM模式中，`Model`代表应用的数据模型，`View`是用户界面，而`ViewModel`作为两者之间的桥梁，处理数据的转换和事件监听。Angular中的`ViewModel`由`Controller`和`Scope`组成，`Scope`是连接`Model`和`View`的...
5-Vue指令之双向数据绑定 V-model
WinSolstice的博客
07-15 7330
喂你吃一口 v-model 的语法糖 v-model 指令用来在 、 、 text、 checkbox、radio 等表单控件元素上创建双向数据绑定 它会根据控件类型自动选取正确的方法来更新元素 这样说有些神奇，但 v-model 本质上不过是语法糖： 它负责监听用户的输入事件以更新数据，并处理一些极端的例子 语法糖 语法糖（Syntactic sugar），也译为糖衣语法，指计算机语言中
Vue之v-model指令实现数据双向绑定
北海之灵的博客
08-08 2604
v-bind指令只能实现数据的单向绑定，从M绑定到V，无法实现双向绑定。 使用v-model指令，可以实现表单元素和Model中数据的双向绑定，并且v-model指令只能运用在表单元素中。 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
Angular2学习笔记.4、表单相关，双向数据绑定，HeroForm
热门推荐
ruojianll的博客
02-22 1万+
开始本次我们将会学会如何用Angular创建表单、two-way data binding(双向数据绑定)、change tracking(检测变化)、validation(验证) 和 error handling(错误处理)等功能以及ngModel、ngControl和ngForm等指令的应用。 这次内容比较长，在最后会给出一个完成的工程来实践本篇的内容。在这个过程中你可以配合演示来实时地观察效
angularjs的双向绑定详解
qq_15257371的博客
09-11 2513
双向数据绑定可能是AngularJS最实用的特性,将MVC的原理展现地淋漓尽致。 AngularJS的工作原理是: HTML页面的加载，这会触发加载页面包含的所有JS (包括 AngularJS) AngularJS启动，搜寻所有的指令(directive) 找到ng-app，搜寻其指定的模块(Module)，并将其附加到ng-app所在的组件上。 AnguarJS遍历所有的子组件，查找指令和bi
AngularJS快速入门
12-10
`<input type="text" ng-model="yourName">`的`ng-model`指令将输入框的值与AngularJS作用域内的`yourName`变量进行了双向绑定。这意味着当用户在输入框中输入内容时，`yourName`的值会自动更新，反之亦然。`<h1>...
CRUD，分页，排序，在MVC中使用AngularJS搜索
04-12
- 它通过双向数据绑定简化了DOM操作，并提供了依赖注入、指令、过滤器等功能。 - 在MVC项目中引入AngularJS库，确保在视图中正确引用。 **3. CRUD操作** - 创建：使用AngularJS的`ng-model`指令绑定输入字段到控制...
AngularJS视频part1.rar
09-13
在这里，Model代表数据模型，View是用户界面，ViewModel是连接Model和View的桥梁，处理数据的双向绑定。视频会介绍这种模式如何在AngularJS中工作，以及其优势。 3. **AngularJS基本结构**：学习AngularJS时，了解...
最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt
09-02
├最新AngularJS开发宝典—第007讲 ng-model在表单中双向绑定实例分析讲解.mp4 ├最新AngularJS开发宝典—第008讲 ng-value的使用实例讲解.mp4 ├最新AngularJS开发宝典—第009讲 实例讲解angular控制单选框.mp4 ├...
在线图书商城平台，资源由网络分享整理，如有侵权请联系我
07-23
网上书店系统是一个基于Web的应用程序，它允许用户在互联网上浏览、选购图书，并进行在线交易。这个系统通常由几个核心组件组成，包括前端用户界面、后台数据库管理、购物车功能、支付接口以及订单处理模块。下面我们将详细探讨这些知识点。 1. ASP.NET：ASP.NET是由微软开发的一个用于构建动态网站、应用程序和Web服务的框架。它支持多种编程语言，如C#，提供了丰富的功能和工具，简化了Web应用的开发过程。在本系统中，ASP.NET可能用于创建网页交互逻辑，处理用户请求并返回响应。 2. C#：C#是一种面向对象的编程语言，常用于构建Windows桌面应用和Web应用。在这个网上书店系统中，C#可能被用来编写服务器端的业务逻辑代码，处理用户输入，访问数据库，以及与各种服务进行交互。 3. 数据库：数据库是存储网上书店系统所有数据的地方，包括书籍信息（如书名、作者、出版社、价格等）、用户信息、订单详情等。常见的数据库管理系统如MySQL、SQL Server或Oracle可能被用于存储和检索这些数据。开发者需要使用SQL语句来设计和操作数据库，确保数据的一致性和完整性。 4. 系统
html+js制作的网页计算机 可以实现加减乘除等运算
07-23
大二下半学期的网页设计课程作业 html+js制作的网页计算机 可以实现加减乘除等运算
王江涛六级：完整齐全 课程+资料（百度网盘链接）
07-23
资料包含：讲义，规划导学，六级核心技巧讲解，水平测试解析，考前点睛，写译预测，高频核心词训练营，等等。
springboot整合MinIO中间件，实现文件便捷管理
07-23
springboot整合MinIO中间件，实现文件便捷管理
运用蚁群算法的3D路径规划Matlab实现方案
07-23
三维路径规划指在已知三维地图中，规划出一条从出发点到目标点满足某项指标最优，并且避开了所有三维障碍物的三维最优路径。现有的路径规划算法中，大部分算法是在二维规划平面或准二维规划平面中进行路径规划。一般的三维路径规划算法具有计算过程复杂、信息存储量大、难以直接进行全局规划等问题。已有的三维路径规划算法主要包括A*算法、遗传算法、粒子群算法等，但是A*算法的计算量会随着维数的增加而急剧增加，遗传算法和粒子群算法只是准三维规划算法。 蚁群算法具有分布计算、群体智能等优势，在路径规划上具有很大潜力，在成功用于二维路径规划的同时也可用于三维路径规划，代码采用蚁群算法进行水下机器人三维路径规划。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
财政绩效观：去工具化、跨周期与嵌入式改革 陆成林.doc
07-23
嵌入式
Flash教程3-逐帧动画：手写字.docx
07-23
flash
Python毕业设计项目之超市管理系统程序源码
最新发布
07-23
Python毕业设计项目之超市管理系统程序源码 python 3.7 django 2.4 mysql 8.0.13 chrome
鲁能巴蜀2024CSP第一轮模拟题
07-23
鲁能巴蜀2024CSP第一轮模拟题
MD5算法C++语言实现代码
07-23
MD5（Message-Digest Algorithm 5）是一种广泛使用的哈希函数，它能够将任意长度的输入数据转换为固定长度的128位（通常用32位的十六进制数表示）摘要。在C++中实现MD5算法，通常是为了进行数据完整性校验或密码存储。以下是关于MD5在C++中实现的一些关键知识点： 1. **MD5基本原理**： - MD5算法由Ron Rivest在1991年提出，它属于单向散列函数，即给定输入可以很容易计算出输出，但无法从输出反推输入。 - 它通过四轮不同的处理过程，包括替换、异或、左移和添加，将输入信息转化为固定长度的摘要。 2. **C++库选择**： - 在C++中实现MD5，可以使用第三方库，如`openssl`库。这个库提供了丰富的加密和哈希功能，包括MD5。 - 也可以使用纯C++编写，不依赖任何外部库。这通常需要实现MD5算法的四个处理步骤和相关辅助函数。 3. **MD5数据结构**： - MD5处理的数据结构是一个128位（16字节）的块，分为四个32位的整数，记为A、B、C、D。 - 摘要结果同样由四个32位整数组成，最终转化为32位的
Vue.js官方文档手册：数据绑定与组件系统解析
Vue.js的核心理念在于MVVM模式，即Model-View-ViewModel，它专注于视图模型层，通过双向数据绑定实现视图和模型之间的同步。 在学习Vue.js之前，建议对AngularJS、KnockoutJS、Ractive.js和Rivets.js等类似框架有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值