如何使用 ng-if 比较字符串

Question

在下面的代码中，我从之前存储的localStorage获取环境并将其分配给$scope.environment。当访问方法为"A"时，它应该显示按钮，当访问方法为"B"时，它应该显示一个下拉列表。

 <form accept-charset="UTF-8" role="form" name="loginForm" ng-controller="PostsCtrl"  novalidate ng-submit="Onsubmit()" >
                    <fieldset>
                        <ul class="heroes" ng-repeat="environment in environments   track by $index" >
                            <li ng-if="environment.accessMethod === 'A'">
                                <button  type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
                                    <span class="badge">{{environment.code}}</span> 
                                </button>
                            </li>
                            <li ng-if="environment.accessMethod === 'B'">
                                <div class="btn-group" uib-dropdown >
                                    <button  type="button" class="btn btn-primary" uib-dropdown-toggle  ng-disabled="disabled">
                                        <span class="badge">{{environment.code}}</span> <span class="caret"></span><span class="sr-only"></span>
                                    </button>
                                    <ul class="dropdown-menu" uib-dropdown-menu role="menu" >
                                        <li   ng-repeat="roledetail in environment.roles"  
                                              ng-click="onSelect(roledetail.roleName)" >
                                            <a href="" >{{roledetail.roleName}}</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>

                        </fieldset>
                </form>

$scope.environments = localStorage.getItem("environments"(;我保留了Json以供理解，但我正在通过localStorage访问它。

$scope.environments = [{
  "code": "abc",
  "name": null,
  "accessMethod": "A",
  "roles": [{
      "roleId": 1,
      "roleName": "A"
    },
    {
      "roleId": 3,
      "roleName": "B"
    }
  ]
}, {
  "code": "XYZ",
  "name": null,
  "accessMethod": "A",
  "roles": [{
      "roleId": 1,
      "roleName": "A"
    },
    {
      "roleId": 3,
      "roleName": "B"
    }
  ]
}, {
  "code": "Neo",
  "name": null,
  "accessMethod": "B",
  "roles": [{
      "roleId": 1,
      "roleName": "A"
    },
    {
      "roleId": 3,
      "roleName": "C"
    }
  ]
}, {
  "code": "LAB",
  "name": null,
  "accessMethod": "B",
  "roles": [{
      "roleId": 1,
      "roleName": "A"
    },
    {
      "roleId": 3,
      "roleName": "B"
    }
  ]
}]

Answer 1

在分配给范围时，您没有执行 Json.parse。

这样做

$scope.environments = JSON.parse(localStorage.getItem("environments"));

Answer 2

使用 ng-show 而不是 if。

ng-show 动态更改元素的可见性，而 ng-if 决定是否应该渲染该元素。