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是异步执行，而Angular并不知道在该块内部进行的更改，所以我们必须告诉Angular有些内容已经发生了变化。

$timeout是setTimeout的Angular包装器。

与Anik提到的一样，您也可以使用$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。

数据更改时，ng-repeat中的刷新复选框

2 个答案: