javascript - 如何使用 Angular Js 中的复选框按降序对表记录的数据应用过滤器

Question

我正在尝试实现依赖于下拉列表的搜索记录，并且还想使用复选框按降序应用记录，但当我单击它时，我的复选框不起作用。

http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

<h1>Search Filter aesc/desc</h1>

<select ng-model="strcolumn">
    <option value="sname">NAME</option>
    <option value="course">COURSE</option>
    <option value="fee">FEE</option>
</select>

<input type="checkbox" name = "isReverse" ng-model="isReverse">

<table border="2px solid green" ng-controller="stuCtrl">
<tr>
<td>NAME</td>
<td>COURSE</td>
<td>FEE</td>
</tr>

<tr ng-repeat="item in ar | orderBy:strcolumn : isReverse ">
<td>{{item.sname|uppercase}}</td>
<td>{{item.course}}</td>
<td>{{item.fee|currency}}</td>
</tr>
</table>

Answer 1

我猜您面临的问题是您的下拉列表和复选框都位于不同的 Controller 中(如果有的话？)。请注意您如何附加 stuCtrl到 <table>元素，将输入排除在外？

我所做的就是用 <div> 包装你的整个代码。并将 Controller 声明移至此处。这是 CodePen 上的一个工作示例:http://codepen.io/anon/pen/JdQLWW .

代码如下所示:

<div ng-controller="stuCtrl">
  <h1>Search Filter aesc/desc</h1>

  <select ng-model="strcolumn">
    <option value="sname">NAME</option>
    <option value="course">COURSE</option>
    <option value="fee">FEE</option>
  </select>

  <input type="checkbox" name="isReverse" ng-model="isReverse">

  <table border="2px solid green">
    <tr>
      <td>NAME</td>
      <td>COURSE</td>
      <td>FEE</td>
    </tr>

    <tr ng-repeat="item in ar | orderBy:strcolumn : isReverse ">
      <td>{{item.sname|uppercase}}</td>
      <td>{{item.course}}</td>
      <td>{{item.fee|currency}}</td>
    </tr>
  </table>
</div>

希望这有帮助!