Блог

Главная - Вопросы по программированию - Angular js, сопоставляющий элемент и извлекающий результат

Angular js, сопоставляющий элемент и извлекающий результат

#html #angularjs #json

#HTML #angularjs #json

Вопрос:

Если элемент соответствует фильтру элементов массива, результат имеет приведенную ниже структуру json

   [{"id": "1", "name":"product1","items": ["item1","item2"],},
  {"id": "2", "name":"product2","items": ["item4","item3"],},
  {"id": "3", "name":"product3","items": ["item5","item1"],}]

Требование заключается в том, что если я выбираю item1 из выпадающего списка, мне нужно отфильтровать весь объект, содержащий item1.
Я новичок в angular js, может ли кто-нибудь мне помочь

Ответ №1:

Используйте filter в ng-repeat

через текстовое поле

 Search by item: <input type="text" ng-model="search.items">
<div ng-repeat="product in data | filter:search">
  {{product}}
</div>

через выпадающий список

 <select class="form-control" ng-model="selectedThana" ng-options="t.items for t in data">
    <option value="">Select</option>
</select>
<div ng-repeat="product in data | filter:selectedThana">
  {{product}}
</div>
  

 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.data = [{"id": "1", "name":"product1","items": ["item1","item2"],},
  {"id": "2", "name":"product2","items": ["item4","item3"],},
  {"id": "3", "name":"product3","items": ["item5","item1"],}];
 
});  
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <select class="form-control" ng-model="selectedThana" ng-options="t.items for t in data">
                        <option value="">Select</option>
                    </select>
<div ng-repeat="product in data | filter:selectedThana">
  {{product}}
</div>
</body>

Комментарии:

1. Спасибо. в выпадающем списке у меня будут item1, itme2, itm3, если выбрать элемент один

2. {«id»: «1», «name»: «product1», «items»: [«item1», «item2»]} {«id»: «3», «name»: «product3», «items»:[«item5», «item1»]} эти два arrys должны быть выбраны

Ответ №2:

Вы можете сделать это с помощью $filter,

HTML

 <select ng-model="user" ng-change="getselected(user)" ng-options="code.name as code.name for code in optionsdownload">
</select>

Контроллер

  $scope.getselected = function(item){
    $scope.wholeobj = $filter("filter")($scope.optionsdownload, item);
 }

ДЕМОНСТРАЦИЯ