在没有 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

Try with below code.
---------------------

<div ng-app="myApp">
  <div ng-controller="PatientController">
      <div ng-repeat ="pptTools in pptToolsArray">
    <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> 
            -----
  </div>
</div><div>


var myApp = angular.module('myApp', []);

function SampleController($scope) {
  $scope.pptToolsArray= [{
      "name": "Online Enrollment",
      "descr": "Allows participants to enroll in benefits for future plans",
      "position": 3,
      "isOn": true,
      "alert": null
    },{
      "name": "offline Enrollment",
      "descr": "Allows participants to enroll in benefits for future plans",
      "position": 3,
      "isOn": false,
      "alert": null
    },{
      "name": "No Enrollment",
      "descr": "Allows participants to enroll in benefits for future plans",
      "position": 3,
      "isOn": true,
      "alert": null
    }];
}

Answer 2

我相信您需要filter。您可以将此数组传递给您的过滤器并在 ng-repeat 中使用它。假设这个数组作为 $scope.tools 保存在控制器中，并且您将过滤器命名为 onTools。然后你会像这样编写你的代码（我假设每个工具都有 url、img src 和 name 的属性并且你想显示它们）：

<div class="toolTile col-md-3" ng-repeat="tool in tools | onTools">
  <a href="{{tool.url}}">
    <img src="{{tool.imgSrc}}" >
       <p>{{tool.name}}</p>
  </a>
</div>

Answer 3

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

"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