如何在angular.js中使用for循环实现双向数据绑定?

时间:2015-11-27 06:09:13

标签: angularjs

我正在使用angular.js,我希望每次$ scope对象的属性更改时都运行for循环。我该如何实现呢?

2 个答案:

答案 0 :(得分:1)

$scope.$watch用于表示“当此属性更改时,运行此回调”并可用于执行您希望执行的操作:

angular
  .module('app', [])
  .controller('MainController', MainController)
;

function MainController($scope) {
  $scope.property = 'initial';
  
  $scope.$watch('property', function() {
    for (var i = 0; i < 5; i++) {
      console.log(i);  
    }   
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<div ng-app='app'>
  <div ng-controller='MainController'>
    <input ng-model='property'>
    <p>{{ property }}</p>
  </div>
</div>

答案 1 :(得分:1)

您可以使用$watch属性检查范围变量以进行更改。但是,$scope.$digest()函数在第一次加载时由内部角度调用,这会导致$scope.$watch()的侦听器函数在页面首次加载时执行。所以为了让它在第一次没有运行我在代码中包含了第一次检查标志。

<强>的index.html

<div ng-controller="MyCtrl">

    <select name="singleSelect" ng-model="data">
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
    </select><br>
    {{data}}
</div>

<强> app.js

function MyCtrl($scope) {

    var firsttime = true;
    $scope.$watch('data',function() { 
        if(!firsttime){
            console.log("digest called"); 
            run();
            val = false;
        }
        firsttime = false;
    });

    var run = function(){
        for(var i=0;i<10;i++)
            console.log("Task"+ i);
    }    
}

这是一个有效的fiddle