javascript - ng-如果没有按预期工作

Question

这就是我填充表格并将复选框附加到 Controller 的方式

    <tr ng-repeat="key in queryResults.userPropNames">
      <td><input type="checkbox"
                 data-ng-checked="selectedKeys.indexOf(key) != -1"
                 data-ng-click="toggleSelect(key)">

      </td>
      <td>{{key}}</td>
      <td ng-repeat="user in queryResults.users">
        {{user.properties[key]}}
      </td>
    </tr>

这是我的 HTML 按钮的样子

  <div>
    <span ng-if="!validKeys" class="button-terminal primary save-user-keys"
          data-disabled="false">Save Keys</span>
    <span ng-if="validKeys" class="button-terminal primary save-user-keys"
          data-ng-click="saveUserKeys()">Save Keys</span>
  </div>

我的 Controller 看起来像

$scope.toggleSelect = function (attribute) {
    if ($scope.selectedKeys.indexOf(attribute) === -1) {
        $scope.selectedKeys.push(attribute);
    } else {
        $scope.selectedKeys.splice($scope.selectedKeys.indexOf(attribute), 1);
    }
};

$scope.saveUserKeys = function() {
    $scope.customAttributes.mappingForUser = $scope.selectedKeys;
    $scope.saveMappings();
};

$scope.validKeys = !!$scope.selectedKeys;

但我的按钮始终处于启用状态，即使我取消选择所有复选框也是如此

这段代码有什么问题？

谢谢

Answer 1

$scope.selectedKeys 是一个数组，即使没有选择键也是如此。然而，空数组是真实的(!![]//=> true)。

一个解决方法是检查 selectedKeys 的长度:

$scope.validKeys = $scope.selectedKeys && $scope.selectedKeys.length;

或者，如果分配 validKeys 只是为了让 View 正确呈现，您可以在 View 上将 ngIf 更新为 ng-if ="selectedKeys.lengh"