ng-如果没有按预期工作

Posted 2023-02-22

技术标签:

【中文标题】ng-如果没有按预期工作【英文标题】：ng-if not working as expected 【发布时间】：2015-08-02 03:59:44 【问题描述】：

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

    <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>

我的控制器看起来像

$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;

但我的按钮始终处于启用状态，即使我取消选中所有复选框

这段代码有什么问题？

谢谢

【问题讨论】：

selectedKeys 不会是一个空数组吗？ [] 是真的，所以 ng-if 将解析为真，除非你这样做 ng-if="validKeys.length" 【参考方案1】：

$scope.selectedKeys 是一个数组，即使没有选择任何键。但是空数组是真实的 (!![] // => true)。

一种解决方法是检查selectedKeys 的长度：

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

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

【讨论】：

【参考方案2】：

如果您打印 validKeys（即 validKeys，您是否看到它在 true/false 之间变化？另外，如果我理解正确，您应该测试 validKeys 的长度 - 如果高于 0，则启用按钮，否则禁用它。