更新チェックボックスのデータが変更さ

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のコンパニオンではありません。だから、あなたは手動でこの

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

同様$scope.$apply

を使用して更新をプッシュする必要がありそうでない場合、あなたは角ここで、角度$timeoutを使用することができ、内部$applyを管理します。あなたのスコープ内$timeoutを注入する必要があり、この

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

同様

。