Angular复选框过滤器工作正常

时间:2016-12-22 09:56:36

标签: javascript angularjs checkbox

有一个对象列表

JS:

$scope.datas = [
        {date:'06-12-2016', name : 'Pinao Class', state: 'archived', remark : 'remarled', amount : 101, id : 21},
        {date:'15-04-2016', name : 'drivers Class', state: 'notarchived', remark : 'remarled', amount : 102, id : 22},
        {date:'24-03-2016', name : 'Airplane Class', state: 'archived', remark : 'remarled', amount : 103, id : 23},
        {date:'28-02-2016', name : 'burger Class', state: 'notarchived', remark : 'remarled', amount : 104, id : 24},
        {date:'28-02-2016', name : 'burger Class1', state: 'notarchived', remark : 'remarled', amount : 104, id : 241},
        {date:'28-02-2016', name : 'burger Class2', state: 'notarchived', remark : 'remarled', amount : 104, id : 2432},
        {date:'28-02-2016', name : 'burger Class3', state: 'notarchived', remark : 'remarled', amount : 104, id : 2342},
        {date:'28-02-2016', name : 'burger Class4', state: 'archived', remark : 'remarled', amount : 104, id : 2443},
        {date:'28-02-2016', name : 'burger Class5', state: 'archived', remark : 'remarled', amount : 104, id : 2243},
        {date:'28-02-2016', name : 'burger Class6', state: 'archived', remark : 'remarled', amount : 104, id : 2242},
];

$scope.paymentList = $scope.datas;

使用复选框进行过滤。我们的想法是使用State:archived

显示所有项目

我的 HTML:

<th><input ng-model="archived.state"  type="checkbox"
      ng-true-value="'notarchived'" ng-false-value="undefined">Show archived</th>
    <tr ng-repeat="paymentinfo in paymentList | filter:keyword | filter:money | filter:getdate | filter:{state: archived.state}">
        <td>{{paymentinfo.date}}</td>
        <td ng-click="singlepage(paymentinfo.id)">
            <a>{{paymentinfo.name}}</a>
        </td>
        <td>
            <div class="grey-flag remark-payment">
                <div class="hover-remark">{{paymentinfo.remark}}</div>
            </div>
        </td>
    </tr>
</th>

过滤器工作正常。当我检查。显示所有未归档的元素。需要显示存档。 这样写的时候

<input ng-model="archived.state"  type="checkbox"
      ng-true-value="'**archived**'" ng-false-value="undefined">

在我写完&#34;存档&#34;时过滤想要的工作。当我写#34; notarchived&#34;时它会起作用,但它的工作正常。

https://plnkr.co/edit/lJjTg4rAu9fgjr4wR4ZH?p=preview - 设置检查。将显示所有未归档的。需要显示存档

1 个答案:

答案 0 :(得分:2)

你应该使用

filter:{state: 'archived'}: archived.state ? true : false

而不是

filter:{state: archived.state}

如下所示。

<tr  ng-repeat="paymentinfo in paymentList | filter:keyword | filter:money | filter:getdate |  filter:{state: 'archived'}: archived.state ? true : false">
   <td>{{paymentinfo.date}}</td>
   <td ng-click="singlepage(paymentinfo.id)" ><a>{{paymentinfo.name}}</a> </td>
   <td>
      <div class="grey-flag remark-payment">
          <div class="hover-remark">{{paymentinfo.remark}}</div>
      </div>
   </td>
</tr>