ng 双向数据绑定
2024-10-21 15:52:49
1、方向1:model->View模型数据绑定到视图
绑定的方式:①双花括号 ②常见的ng指令(ngRepeat ngIf ngShow....)
效果:数据一旦绑定到视图上,随着数据的修改,视图会自动更新。
例子:点击按钮,实现数字的自增(count++),并显示在视图中。
对比:
DOM操作方式:查找元素、操作元素
angular:修改model数据
2、方向2:View->Model将视图中用户的输入/操作 绑定到模型数据
实现方式: ngModel
双向数据绑定:ngModel可以实现双向数据绑定,将定义好的模型数据绑定到视图,也可以将用户的输入的结果绑定到数据上。
结果:
代码:
<html ng-app="myModule">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<div ng-controller="myCtrl">
<input type="text" ng-model="inputTxt"/>
<h1>{{inputTxt}}</h1>
</div>
<script>
var app=angular.module('myModule',['ng']);
app.controller('myCtrl',function($scope){
$scope.inputTxt = '';
})
</script> </body>
</html>
结果:
代码:
<html ng-app="myModule">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<div ng-controller="myCtrl">
<input type="text" ng-model="inputTxt"/>
<h1>{{inputTxt}}</h1>
</div>
<script>
var app=angular.module('myModule',['ng']);
app.controller('myCtrl',function($scope){ $scope.inputTxt = 'zhang';
})
</script> </body>
</html>
最新文章
- Resource leak: &#39;context&#39; is never closed
- DOCTYPE声明的作用是什么?严格模式与混杂模式如何区分?
- Linux内核分析之跟踪分析Linux内核的启动过程
- cocos2d调度器(定时执行某函数)
- 将数据库从普通文件系统迁移到ASM中
- C#中运用事件实现异步调用
- redolog
- aop编程 环绕round
- java操作mongodb——连接数据库
- 今日头条视频Url嗅探
- Scut游戏引擎改造兼容Codis。
- 百度地图点击地图显示地址详情的默认方法怎么关闭,去掉百度地图api图标信息
- 介绍Dynamics 365 Performance Center
- Windows下通过pip安装PyTorch 0.4.0 import报错
- akka cluster singleton
- db2命令参数with ur
- 【leetcode 简单】 第八十三题 反转字符串中的元音字母
- pro mvvm 读书笔记
- Oracle AWR之-enq: TX - allocate ITL entry
- angular学习笔记系列一