радиально-фильтр на основе категории меню

Я использую массив массивов для отображения данных ...радиально-фильтр на основе категории меню

<div class="form-container" ng-repeat="formblock in forms"> 
    <div class="form-block" ng-repeat="form in formblock | filter:dateFilter"> 
     <div class="formURL">{{ form.url }}</div> 
     <div class="formCount">{{ form.count }}</div> 
     <div class="formSubmit">{{ form.date }}</div> 
    </div> 
</div>

Теперь у меня есть меню ниже этого с определенными значениями даты. Я хочу, чтобы фильтровать данные, когда параметр в меню щелкают ...

<div class="date_menu" ng-repeat="singledate in dates"> 
    <button ng-click="dateFilter=singledate" class="option">{{singledate}}</button> 
</div>

Как вы можете видеть, что я пытался фильтровать данные, но он не работает, как ожидалось. На самом деле ничего не происходит, когда я нажимаю на пункт меню.

Как можно фильтровать данные, основываясь на значении меню singledate

источник

2016-08-26 Bolboa

Вот способ, используя основные угловые фильтры: (мой код ниже, был взят и изменен/дополненной от их документации)

ссылки:

фильтры: https://docs.angularjs.org/api/ng/filter/filter

предыдущий вопрос: ng-repeat filtering data by date range

Я предполагаю, что предыдущий вопрос поможет вам пойти дальше, но, надеюсь, мой код поможет вам начать, ответьте на свой прямой вопрос с помощью plnk.

<body ng-app=""> 
    <div class="left"> 
    <div ng-init="sessions = [{name:'John', phone:'555-1276', date:1288323623006}, 
         {name:'Mary', phone:'800-BIG-MARY', date:1287323623006}, 
         {name:'Mike', phone:'555-4321', date:1288323623006}, 
         {name:'Adam', phone:'555-5678', date:1288323623006}, 
         {name:'Julie', phone:'555-8765', date:1244323621006}, 
         {name:'Juliette', phone:'555-5678', date:1188323623006}]"></div> 
    <div ng-init="dates = [1288323623006,1287323623006, 1244323621006, 1188323623006]"></div> 

    <table id="masterList" > 
     <tr><th colspan="3">Tutoring Sessions Available</th></tr> 
     <tr><th>Name</th><th>Phone</th></tr> 
     <tr ng-repeat="session in sessions | orderBy : 'date' "> 
     <td>{{session.name}}</td> 
     <td>{{session.date | date: 'short'}}</td> 
     </tr> 
    </table> 
    <table id="search-results" > 
     <tr><th colspan="3">Tutors Available At Chosen Date-Time</th></tr> 
     <tr><th>Name</th><th>Phone</th></tr> 
     <tr ng-repeat="tutor in sessions | filter:tutorDate "> 
     <td>{{tutor.name}}</td> 
     <td>{{tutor.phone}}</td> 
     <td>{{tutor.date | date: 'short'}}</td> 
     </tr> 
    </table> 
    </div> 
    <div class="right"> 
    <div> 
     <form> 
     <label>Session Times</label> 
     <div ng-repeat="aDate in dates"> 
      <p> 
      - {{ aDate | date: 'MMM d, y h:mm:ss a'}} 
      <input type="radio" name="filterDateChosen" ng-model="$parent.tutorDate" ng-value="aDate" > 
      </p> 
     </div> 
     </form> 
    </div> 
    </div> 
</body>

plnk

источник

2016-08-27 00:38:18 Tom22

Это помогло, но не могли бы вы изменить 'input' к' button' тега? Я попытался это сделать, но фильтр не сработает. Я попробовал '' – Bolboa

будет работать. Это не стилизует класс кнопки, чтобы показать, какая кнопка выбрана без каких-либо строк кода – Tom22

, определите класс с именем 'highlight-class', и вы можете применить класс к активной кнопке с помощью кнопки

радиально-фильтр на основе категории меню

ответ

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