2015-08-12 2 views
1

У меня возникла проблема с созданием динамического числа выбора для фильтрации ng-repeat.Создание списка выборок для фильтрации

я загружаю из объекта JSON, который выглядит следующим образом:

[ 
    {"filter":"Age", 
     "options": ["Young", "Middle-aged", "Old"] 
    }, 
    {"filter":"Color", 
     "options": ["Blue", "Red", "Yellow"] 
    } 
] 

У меня нет доступа к коду я использовал для создания HTML, но я могу получить и выбирает параметры отформатированные правильно используя ng-repeat или ng-options, но неважно, я не могу заставить его фактически фильтровать мои данные. Если я просто жестко кодирую HTML для выбора, он отлично работает, поэтому разница в том, что в сгенерированной версии есть дополнительный div снаружи с линией ng-repeat. Извините, что у меня нет кода для меня, но я могу попытаться написать что-то подобное, если кто-то должен увидеть что-то похожее на него. По сути, конечный продукт, если я просто жестко его кодирую, выглядит так, и если я его создаю, внешний div просто имеет дополнительный ng-repeat="person in people".

<div> 
    <label>Age:</label>                 
    <select ng-model="query.age"> 
     <option value="Young">Young</option>             
     <option value="Middle-aged">Middle-aged</option>         
     <option value="Old">Old</option>             
    </select> 
</div> 

Я считаю, что проблема связана с неопределенностью. Я обнаружил, что если у меня только {{person.age}} где-то на странице, он работает в жестко закодированной версии, а не в сгенерированном, но я не знаю, как лучше всего это исправить. Я знаю, что дочерние области не могут быть напрямую доступны родительскими областями, поэтому мне было интересно, как лучше всего будет структурировать это.

EDIT: Это Plnkr - это то, что я имею в виду. Я не могу получить сгенерированный выбор для работы с фильтром. Если я их жестко кодирую, он работает нормально, но только сгенерированные ничего не делают.

ответ

0

Если я вас правильно понимаю, это должно работать:

ANGULAR:

angular 
    .module('testApp', []) 
    .controller('MyCtrl', function($scope) { 
     $scope.items = 
      [ 
       {"filter":"Age", 
        "options": ["Young", "Middle-aged", "Old"] 
       }, 
       {"filter":"Color", 
        "options": ["Blue", "Red", "Yellow"] 
       } 
      ]; 
    }); 

HTML:

<div ng-controller="MyCtrl"> 
    <div ng-repeat="item in items"> 
    <label>{{ item.filter }}:</label> 
    <select ng-options="o for o in item.options" 
      ng-model="item.selected"></select> 
    </div> 
</div> 

Вот Plnkr

UPDATE Если вы хотите применить фильтр по этому вы можете использовать следующий код в нг-повторе

<div ng-repeat="person in people | filter: (items | filter: { filter: 'age' })[0].selected"> 
    {{ person.name }} 
</div> 

Plnkr Обновлено

+0

я имел что-то подобное, но моя проблема в том, что я не уверен, как заставить фильтр работать над этим сейчас. [Plnkr.] (Http://plnkr.co/edit/hn46pD2FbDjvjJI485Ep) Как это, например. –

+0

Я обновил свой ответ, показывая, как вы можете получить фильтр, работающий на основе вашего plnkr – keithm

+0

Это почти то, что я ищу, но у меня есть еще два последующих вопроса. Есть ли способ заставить фильтр работать только с соответствующим атрибутом человека? Например, в вашем обновленном Plnkr, если у человека был цвет «Желтый средний возраст» или что-то в этом роде, результаты также показывали бы этого человека, даже если их возраст был чем-то другим. Второй вопрос заключается в том, есть ли способ избавиться от ключевого слова «age» в обновленном фильтре. Моя конечная цель состоит в том, чтобы получить все эти фильтры, созданные динамически, поэтому необходимость вводить фильтр не то, что я хочу. –

Смежные вопросы