ng 双向数据绑定

最新推荐文章于 2021-06-16 22:26:47 发布

weixin_30730053

最新推荐文章于 2021-06-16 22:26:47 发布

阅读量136

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/web-fusheng/p/6953553.html

版权

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>

转载于:https://www.cnblogs.com/web-fusheng/p/6953553.html

weixin_30730053

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ng 双向数据绑定

1、方向1：model->View模型数据绑定到视图绑定的方式：①双花括号 ②常见的ng指令（ngRepeat ngIf ngShow....）效果：数据一旦绑定到视图上，随着数据的修改，视图会自动更新。例子：点击按钮，实现数字的自增（count++），并显示在视图中。对比：DOM操作方式：查找元素、操作元素angular：修改model数据2、方向2：View-&...
复制链接

扫一扫