javascript - 在没有 ng-repeat 的情况下使用 Angular ng-if？

Question

我正在返回这样的数据数组:

"Tools": [
    {
      "name": "Online Enrollment",
      "descr": "Allows participants to enroll in benefits for future plans",
      "position": 3,
      "isOn": true,
      "alert": null
    },

我想让它做的只是渲染 div 是“isOn”设置为 true。不认为我必须在 ng-repeat 中执行此操作，因为我将它放在每个场景的代码中，如下所示(因为每个 div 包含不同的文本和图形):

        <div ng-if="pptTools.isOn ==true" class="toolTile col-md-3">
            <a href="#/claimEnter">
                <img src="ppt/assets/toolIcons/submiticon.svg" >
                <p>Submit a Claim for Reimbursement</p>
            </a>
        </div>
        <div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
            <a href="#/commuterOrder">
                <img src="ppt/assets/toolIcons/commutericon.svg" >
                <p>GoNavia Commuter</p>
            </a>
        </div>
        <div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
            <a href="#/accessHsa">
                <img src="ppt/assets/toolIcons/hsa.svg" >
                <p>Access my HSA</p>                        
            </a>
        </div>        
        <div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
            <a href="#/clearSwipe">
                <img src="ppt/assets/toolIcons/clearswipe.svg" >
                <p>Clear a Swipe</p>                        
            </a>
        </div>   

似乎检查了 ng-if 并尝试在开发工具中呈现，但没有显示 div。这是一个截图:

请问有什么帮助吗？

非常感谢。

Answer 1

你应该返回一个对象而不是一个数组:

"Tools": {
    onlineenrollment: {
       "name": "Online Enrollment",
       "descr": "Allows participants to enroll in benefits for future plans",
       "position": 3,
       "isOn": true,
       "alert": null
    },
    ...
}

然后你可以在没有ng-repeat

的情况下检查每个项目

<div ng-if="ppt.Tools.onlineenrollment.isOn" class="toolTile col-md-3">
    <a href="#/clearSwipe">
        <img src="ppt/assets/toolIcons/clearswipe.svg" >
        <p>Clear a Swipe</p>                        
    </a>
</div> 

或者，您可以使用索引引用数组中的项目，但您不应该这样做，除非您完全确信每次的顺序都是一致的。我不会这样做...

<div ng-if="ppt.Tools[0].isOn" class="toolTile col-md-3">
    <a href="#/clearSwipe">
        <img src="ppt/assets/toolIcons/clearswipe.svg" >
        <p>Clear a Swipe</p>                        
    </a>
</div> 

您还可以查看 https://docs.angularjs.org/api/ng/function/angular.forEach