角度复选框过滤器工作反转答案

【问题标题】：Angular checkbox filter works reversed角度复选框过滤器工作反转
【发布时间】：2016-12-22 19:08:33
【问题描述】：

有一个对象列表

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">

当我只写“归档”时过滤器想要的工作，当我写“未归档”时它工作，但它反向工作。

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

【问题讨论】：

请分享一个 jsfiddle
plnkr.co/edit/lJjTg4rAu9fgjr4wR4ZH?p=preview
过滤器：{state: 'archived'}：archived.state ? true : false 修改您的过滤条件可能会有所帮助

标签： javascript angularjs checkbox

【解决方案1】：

你应该使用

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>

【讨论】：