javascript - 在 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 魔法发挥作用。为此，您应该习惯于始终使用相同类型的引号(通常对任何 HTML 属性使用双引号 "statement" ，同时使用其他类型(分别是单引号 '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>另外，示例的标签不包围任何其他元素，也不类似于自闭合 HTML 节点，例如 <input /> 。只有少数标签支持这种特殊用途。

隔离ng-if范围

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

ng-show和ng-hide通过简单地隐藏相应元素(应用标准 CSS display:none 属性/类)来提供稍微不同的方法