Question

[{
    "first": 1,
    "second": 1,
    "third": "deep",
    "object": ["abc", "def"]
  },
  {
    "first": 1,
    "second": 1,
    "third": "deeper",
    "object": ["ghi", "jkl"]
  }, {
    "first": 1,
    "second": 1,
    "third": "deep",
    "object": ["mno", "pqr"]
  }, {
    "first": 1,
    "second": 1,
    "third": "deeper",
    "object": ["stuv", "wxyz"]
  }
]

这是我拥有的json文件，我需要的是

我使用ng-repeat在下拉菜单中显示了数据。但是，我无法根据条件显示数据。

我有两个按钮，第一个名字是“ deep”，第二个名字是“ deeper”。

我要基于此显示数据。

如果单击“深度”按钮，则只想显示与“深度”相同的深度数据。

如何在angularjs中处理此问题？

<li class="nav-item dropdown">
  <div class="dropdown-menu">
    <div class="dropdown-item" ng-repeat="filter in filters">
      <div class="filter-class">{{filter}}</div>
    </div>
  </div>
</li>

Answer 1

您可以使用ng-if属性。有关更多详细信息，请检查https://www.w3schools.com/angular/ng_ng-if.asp

Answer 2

您可以通过这种方式使用ng-if

var app = angular.module('myApp', [])
app.controller('myCtrl', ['$scope', function($scope) {

  $scope.filters = [{
      "first": 1,
      "second": 1,
      "third": "deep",
      "object": ["abc", "def"]
    },
    {
      "first": 1,
      "second": 1,
      "third": "deeper",
      "object": ["ghi", "jkl"]
    }, {
      "first": 1,
      "second": 1,
      "third": "deep",
      "object": ["mno", "pqr"]
    }, {
      "first": 1,
      "second": 1,
      "third": "deeper",
      "object": ["stuv", "wxyz"]
    }
  ];

}])

<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-controller="myCtrl">
  <li class="nav-item dropdown">
    <div class="dropdown-menu">
      <div class="dropdown-item" ng-repeat="filter in filters">
        <div ng-if="filter.third =='deep' " class="filter-class">{{filter}}</div>
      </div>
    </div>
  </li>
</body>

</html>

Answer 3

通过添加ng-if指令来处理条件来更新视图。

<div class="dropdown-item" ng-repeat="filter in filters" ng-if="filter.third == appliedCheck">
    <div class="filter-class">{{filter}}</div>
</div>

添加ng-click以保留appliedCheck的值：

<button ng-click="appliedCheck = 'deep'">Deep</button>
<button ng-click="appliedCheck = 'deeper'">Deeper</button>

希望有帮助！

angularjs中基于条件的显示数据

3 个答案: