Question

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

<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

过滤数据

Answer 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

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

1 个答案: