ng 双向数据绑定

Posted 撒哈拉的雪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ng 双向数据绑定相关的知识,希望对你有一定的参考价值。

 

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>

 

以上是关于ng 双向数据绑定的主要内容,如果未能解决你的问题,请参考以下文章

如何初始化片段中的绑定属性以使双向数据绑定工作

angularjs系列之双向绑定

angularJs初体验,实现双向数据绑定!使用体会:比较爽

angularjs的数据双向绑定怎么实现的?

Angular.Js 性能、大型数据集、ng-repeat、带有过滤器和双向绑定的 html 表

实现双向绑定