Question

我正在返回一系列数据：

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

我想让它做的只是渲染div是＆＃34; isOn＆＃34;设置为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

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

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
    }];
}

使用Angular ng-if没有ng-repeat？

3 个答案: