2015-11-27 12 views
0

Я использую angular.js, и я хочу, чтобы цикл for запускался каждый раз при изменении свойства объекта объекта scope. Как это реализовать?Как реализовать двустороннюю привязку данных с циклом for в angular.js?

+0

Вы пытались использовать $ watch() для свойств, которые вы хотите проверить? – NPToita

+0

В чем же проблема, что вы пробовали? Stackoverflow не является генератором кода ;-) –

+0

вы можете предоставить плункер или jsfiddle. Это будет очень легко дать ответ. –

ответ

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.

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>