Условное отображение данных в angularjs - PullRequest
Новая
       1

Условное отображение данных в angularjs

1 голос
/ 14 мая 2019 
[{
    "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. Но я не могу отобразить данные в зависимости от условия.

У меня есть две кнопки, первое имя "глубокий", а второе имя "глубже".

Я хочу отобразить данные, основанные на этом.

Если я нажму кнопку «глубоко», я хочу показать только глубокие данные, такие же, как «глубже».

Как я могу справиться с этим в 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>

Ответы [ 3 ]

0 голосов
/ 14 мая 2019

Вы можете использовать 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>
0 голосов
/ 14 мая 2019

Обновите представление, добавив директиву 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>

Надеюсь, это поможет!

0 голосов
/ 14 мая 2019

Вы можете использовать свойство ng-if. Для более подробной информации проверьте https://www.w3schools.com/angular/ng_ng-if.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...