javascript - 数据更改时在 ng-repeat 中刷新复选框

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

setTimeout 不是 angularjs 的组件。因此，您必须使用 $scope.$apply 手动推送更新

像这样

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

否则你可以使用angular $timeout ，这里 Angular 在内部管理 $apply。

像这样

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

你必须在你的作用域中注入(inject) $timeout。