基于类别菜单的角度过滤器答案

【问题标题】：Angular-filter based on category menu基于类别菜单的角度过滤器
【发布时间】：2016-08-27 08:38:18
【问题描述】：

我正在使用数组数组来显示数据...

<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过滤数据

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

这是一种使用基本角度滤镜的方法：（我下面的代码是从他们的文档中获取和更改/增强的）

链接：

过滤器：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

【讨论】：

这很有帮助，但你能把input 改成button 标签吗？我试过这样做，但过滤器不起作用。我试过<button ng-model="$parent.dateFilter" ng-value="aDate">{{aDate}}</button>
将起作用。这不会对按钮类进行样式化以显示在没有更多代码行的情况下选择了哪个按钮
定义一个名为 'highlight-class' 的类，您可以使用