在 ng-repeat 中使用 ng-if 和 ng-switch 失败

Question

我正在尝试将 userId 与 currentuserId 进行比较，并且当操作条件为 approve 时，我正在尝试填充复选框。但我的ng-if 似乎总是失败。我怎样才能更好地做到这一点。 ng-switch 工作正常。我应该遵循其他方式吗？当用户和当前用户 id 匹配时，我不想为他们启用复选框

<tr ng-repeat="details in searchresponse">
  <td class=list align=center ng-switch="details.action">
    <span ng-switch-when="View">
            <input type="checkbox" name="ent" id="ent" ng-model="details.selected">
        </span>
    <span ng-switch-when="Approve">
        <ng-if='details.UserId' != 'details.currentUserId'><input type="checkbox" name="ent" id="ent" ng-model="details.selected">
     </span>

Answer 1

HTML 属性

正如在其他答案中已经说明的那样，您需要正确地在引号中包含您的 HTML 属性，以使任何 angularJS 都能发挥作用。为此，您应该习惯于始终使用相同类型的引号（通常双引号 "statement" 用于任何 HTML 属性，而使用其他类型（分别为单引号 'string'）在 AngularJS 语句中包含字符串。

在您的示例中，无需将变量名称放在额外的引号中，因为您不希望将它们作为文字字符串进行评估。

变化

ng-if='details.UserId' != 'details.currentUserId'

到

ng-if="details.UserId != details.currentUserId"

仅将ng-if 用作属性

此外，不允许以任何其他方式使用ng-if directive，例如在任意 HTML 节点的 HTML 属性中。 （这在其指令定义中用restrict: 'A' 表示，它明确限制对属性的使用。这将进一步改变您的代码

<ng-if="details.UserId != details.currentUserId">

到

<div ng-if="details.UserId != details.currentUserId">

拥抱 HTML 标签

您的示例中的<ng-if> 标记也不包含任何其他元素，也不类似于<input /> 等自闭合HTML 节点。支持这种特殊用途的标签屈指可数。

隔离ng-ifscope

如果您仍然遇到问题，解决您的 AngularJS 模板或范围变量，您应该考虑 ng-if 确实创建了一个隔离范围，因为相关的容器对象实际上已从 DOM 中删除，或者分别插入到 DOM 中，具体取决于它的条件语句。 （如果您想防止大量垃圾代码的后台渲染，这可能特别有用。或者您还可能为通常在单个页面访问中多次显示和隐藏的元素产生大量不必要的高工作量）

ng-show 和 ng-hide 通过简单地隐藏各自的元素（应用标准 CSS display:none 属性/类）提供了一种略有不同的方法

Answer 2

代替

<ng-if='details.UserId' != 'details.currentUserId'><input type="checkbox" name="ent" id="ent" ng-model="details.selected">

做

<span ng-if="details.UserId != details.currentUserId"><input type="checkbox" name="ent" id="ent" ng-model="details.selected" /></span>

Answer 3

去掉连字符'

 <ng-if='details.UserId!=details.currentUserId'>...