Angular过滤器,带复选框

时间:2017-08-25 09:05:51

标签: javascript html angularjs checkbox filter

我想为我的程序添加一个过滤器,但我不知道该怎么做..谷歌只给我那些搜索字段过滤器或名称复选框..我不明白...到目前为止..

    var app = angular.module('surveyApp', []);

app.controller('BackendCtrl', function($scope, $http){

        $scope.informations = [
            {
                id: 123,
                text: "first object",
                checkbox: 1,
            },
            {
                id: 222,
                text: "second object",
                checkbox: 1,
            },
            {
                id: 303,
                text: "third object",
                checkbox: 1,
            },
            {
                id: 412,
                text: "fourth object",
                checkbox: 0,
            },
            {
                id: 500,
                text: "fifth object",
                checkbox: 0,
            },
            {
                id: 666,
                text: "sixth object",
                checkbox: 1,
            },

        ];
   });

这是我的角度数据!

      <html>
<head>
    <title>Survey</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
</head>
<body ng-app="surveyApp" ng-controller="BackendCtrl">  

<div style="width: 150px; height: 40px; border:1px solid;">

    <input type="checkbox"/> All objects

</div>

<div>
    <table  border="1" style="margin: 0 auto;" ng-controller="BackendCtrl">
        <tr ng-repeat="item in informations">
            <td>{{item.id}}</td>
            <td>{{item.text}}</td>
            <td><input type="checkbox" ng-model="item.checkbox" ng-true-value="1" ng-false-value="0"/>cool</td>
        </tr>
    </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<script src="app.js"></script> 

</body>
</html>

第一个复选框应该是我对item.checkbox的过滤器..如果它是真的,应该给出所有数字,如果它只是假的,那么#34;不冷却&#34;对象.. greez 请帮助我

1 个答案:

答案 0 :(得分:0)

我认为你可以这样做:

在您的控制器中:

$scope.filter = {showall: True}

在你的模板中:

<div style="width: 150px; height: 40px; border:1px solid;">

    <input type="checkbox" ng-model="filter.showall"/> All objects

</div>

<div>
    <table  border="1" style="margin: 0 auto;" ng-controller="BackendCtrl">
        <tr ng-repeat="item in informations"
            ng-if="filter.showall || item.is_not_cool">
            <td>{{item.id}}</td>
            <td>{{item.text}}</td>
            <td><input type="checkbox" ng-model="item.checkbox" ng-true-value="1" ng-false-value="0"/>cool</td>
        </tr>
    </table>
</div>

我不确定你所说的"not cool" objects是什么,但你可以将条件item.is_not_cool修改为你想要的。