zoukankan      html  css  js  c++  java
  • 数据绑定

    方向1(Model数据 绑定到View):

    <div ng-controller="myCtrl">
    <p>{{count}}</p>
    <button ng-click="add()">点我</button>
    </div>
    <script>
    var app = angular.module('myApp', ['ng']);
    app.controller('myCtrl', function ($scope) {
    $scope.count=0;
    $scope.add=function(){
    $scope.count++;
    }
    })
    相比DOM操作:先去查找元素,再去设置元素,只需要把model数据绑定视图上,数据改,视
    图就会更新。

    方向2的绑定(将View数据绑定到Model数据)
    <div ng-controller="myCtrl">
    <input type="text" ng-model="text">
    <p>{{text}}</p>
    </div>
    <script>
    var app = angular.module('myApp', ['ng']);
    app.controller('myCtrl', function ($scope) {
    $scope.text=20;
    $scope.$watch('text',function(){ $watch监视‘text’这是数据,有变化执行回掉函数
    console.log($scope.text) 更改的值
    })
    })
    首先是$scope方向1的绑定,绑定到view上,当在输入框输入时是对$scope中数据绑定,

    <p>{{num}}</p>===>ng框架自动添加一个监听(watch),和$scope.$watch是一样的,只要是数据发生了变化,视图就会更新。???

    如何知道数据是否发生了变化?
    ng会周期性的运行一个函数来检查$scope的模型数据是否发生变化,称之为$digest===>$scope.$digest()

    实现方法只有一种方式: ng-model
    <input type='text' ng-model='myText'/>

    $scope.$watch('模型变量名',function(){})



  • 相关阅读:
    装饰器函数(一)
    面向对象的初阶复习
    内置函数/反射/内置方法(单例类面)
    property特殊属性/类方法/静态方法
    多态/封装
    接口类抽象类
    初始继承之顺序/深度优先及广度优先
    类涉及的空间关系及组合(可变项地址面)
    <head></head>
    让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
  • 原文地址:https://www.cnblogs.com/liangfc/p/7529258.html
Copyright © 2011-2022 走看看