Question

我有一些操作可以逐个选择，或者全部或不选择select（每个选项都是按钮，我自定义）：

<select ng-model="selectedActions">
            <option value="1">All</option>
            <option value="0">None</option>
</select>

我的清单：

<div ng-repeat="action in data.actions" >
<input type="checkbox"
   id="action_{{action.id}}"
   ng-model="data.actions[action.id].checked"
   ng-init="data.actions[action.id].checked=1"
   ng-true-value="1"
   ng-false-value="0">
</div>

如果我通过URL加载包含选项列表的视图（甚至在刷新页面时），默认情况下，视图将加载所有选定的选项。一切正常，如果我取消选中一个选项，“全部”按钮将被取消选中。如果我再次手动检查所有操作，则再次检查“全部”按钮（同样适用于“无按钮”）。按钮也很好用。

我的问题是，当我通过侧边栏的链接访问此视图，而不是通过直接URL或刷新页面时），在页面加载后选中“全部”按钮，然后单击“无”按钮，如果我再次单击“全部”按钮，则会选择所有操作，但“全部”按钮不会显示为已选中。为了实现这一点，我必须再次单击“全部”按钮。

我怎样才能摆脱那些不必要的再点击“全部”按钮？

JS：

$scope.$watch('data.actions', function(newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.actions = [];
            for (var action in newVal){
                if(newVal[action]['checked'] === 1){
                    $scope.actions.push(action);
                }
            }
            if ($scope.actions.length == $scope.Schedule.getCurrentActionns().length){
                $scope.selectedActions = '1';
            } else if ($scope.actions.length == 0) {
                $scope.selectedActions = '0';
            } else {
                $scope.selectedActions = '';
            }
        }
    }, true);

$scope.$watch('selectedActions', function (newVal) {

            if (newVal) {
                for (var action in $scope.data.actions) {
                    if (newVal == 1) {
                        $scope.data.actions[action]['checked'] = 1;
                    }
                    if (newVal == 0) {
                        $scope.data.actions[action]['checked'] = 0;
                    }
                }
            }
    });

另外，当我的页面加载时

if (!$scope.selectedActions){
          $scope.selectedActions = '1';
}

Answer 1

使用<select>和<input>元素上的ng-change directive，而不是使用观察者：

<select ng-model="selectedActions" ng-change=selectUpdate(selectedActions)>
    <option value="1">All</option>
    <option value="0">None</option>
</select>

JS

$scope.selectUpdate = function (newVal) {
    for (var action in $scope.data.actions) {
        if (newVal == 1) {
            $scope.data.actions[action]['checked'] = 1;
        }
        if (newVal == 0) {
            $scope.data.actions[action]['checked'] = 0;
        }
    }
});

类似地：

<div ng-repeat="action in data.actions" >
    <input type="checkbox"
       id="action_{{action.id}}"
       ng-model="data.actions[action.id].checked"
       ng-change="updateChecked(data.actions)"
       ng-init="data.actions[action.id].checked=1"
       ng-true-value="1"
       ng-false-value="0" />
</div>

JS

$scope.updateChecked = function(newVal) {
    $scope.actions = [];
    for (var action in newVal){
        if(newVal[action]['checked'] === 1){
            $scope.actions.push(action);
        }
    }
    if ($scope.actions.length == $scope.Schedule.getCurrentActionns().length){
        $scope.selectedActions = '1';
    } else if ($scope.actions.length == 0) {
        $scope.selectedActions = '0';
    } else {
        $scope.selectedActions = '';
    }
}

ng-change指令仅在用户更改特定<input>或<select>元素时才调用该函数，而不是脏检查每个摘要周期。

有关详细信息，请参阅

在操作中选择选择选项

1 个答案: