Refresh флажок в нг-повтора при изменении данных

Question

HTML

<li ng-repeat="col in columns"> 
    <span class="inputH"> 
     <input type="checkbox" value="col.name" ng-if="col.default === true" checked 
       ng-click="onColSelect(col.name,$event)" id="column_{{$index}}"> 

     <input type="checkbox" value="col.name" ng-if="col.default === false" 
       ng-click="onColSelect(col.name,$event)" id="column_{{$index}}"> 
    </span> 

    <span class="textH">{{ 'leadOpportunityHeader.' + col.name | translate }}</span> 
</li> 

JS

$scope.onColumnSelectCancel = function() { 

    setTimeout(function() { 
     var cookieData = $cookieStore.get('selectedColumn'); 
     $scope.unSelectedColoumns = cookieData; 

     angular.forEach($scope.columns, function (value, key) { 
      var flag = false; 
      for (var k = 0; k < cookieData.length; k++) { 
       if (value.name == cookieData[k]) { 
        flag = true; 
       } 
      } 
      if (flag == false) { 
       value.default = false; 
       flag = true; 
      } 
     }); 
     console.log("new column", $scope.columns); 
    }, 100); 
}; 

То, что я действительно пытается сделать, когда onColumnSelectCancel() называется, мне нужно обновить все флажки с их проверкой и снимите флажок. Мои данные меняются, но состояние флажков по-прежнему не меняется. Если я проверил флажок, а затем я называю onColumnSelectCancel(), теперь галочки должны меняться в зависимости от источника $scope.columns

Я применил $apply также, но это не сработало.

Answer 1

Если ваш код контроллера работает нормально, тогда просто введите $timeout в свой контроллер и измените setTimeout(function() { }) на $timeout(function() {}), и это должно сработать.

Так что ваш код теперь будет:

$scope.onColumnSelectCancel = function() { 

    $timeout(function() { 
     var cookieData = $cookieStore.get('selectedColumn'); 
     $scope.unSelectedColoumns = cookieData; 

     angular.forEach($scope.columns, function (value, key) { 
      var flag = false; 
      for (var k = 0; k < cookieData.length; k++) { 
       if (value.name == cookieData[k]) { 
        flag = true; 
       } 
      } 
      if (flag == false) { 
       value.default = false; 
       flag = true; 
      } 
     }); 
     console.log("new column", $scope.columns); 
    }, 100); 

}; 

Это потому, что setTimeout является асинхронным выполнением и Угловое не знают об этих изменениях делаются внутри этого блока, поэтому мы должны сказать Угловым, что-то изменилось.

$timeout - Угловая обертка setTimeout.

Как упоминается Аник, вы также можете использовать $scope.$apply, который заставляет Angular запускать digest cycle, который может выйти из строя в тот момент, когда цикл дайджеста уже выполняется. Поэтому всегда можно использовать $timieout.

Answer 2

setTimeout не является составной частью angularjs. Таким образом, вы должны вручную нажать обновление с помощью $scope.$apply

Как это

setTimeout(function() { 
    var cookieData = $cookieStore.get('selectedColumn'); 
    $scope.unSelectedColoumns = cookieData; 
    $scope.$apply(); 
}, 100); 

В противном случае вы можете использовать угловую $timeout, здесь угловая управляет $apply внутри.

Как это

$timeout(function() { 
    var cookieData = $cookieStore.get('selectedColumn'); 
    $scope.unSelectedColoumns = cookieData; 
}, 100); 

Вы должны вводить $timeout в вашей области.