Question

我有以下代码，我试图通过选中一个复选框来筛选产品数组，但在我的情况下列表未过滤，请单击复选框，我已在复选框的值中设置city的值，但列表未过滤？

//here  we create the product array and display the array in the HTML page.
var app=angular.module("myApp",[]);
app.controller("myCont",function($scope){

        var product = [
                          {pid:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
                          {pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
                          {pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
                          {pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"},
                          {pid:"103",ename:"Selena",esalary:"35000",ecity:"England"},
                          {pid:"102",ename:"Lokesh",esalary:"32500",ecity:"Malwa"},
                          {pid:"108",ename:"Gotm",esalary:"8910",ecity:"Ujain"},
                          {pid:"106",ename:"Soni",esalary:"16000",ecity:"bhopal"},
                           {pid:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
                          {pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
                          {pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
                          {pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"}
                         ]     
                        $scope.products=product; 
                  });

<html>
<head>
    <script src="angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script src="controller.js"></script>
</head>
<style>
#count
{
    color: blue;
} 
#search
{
    background-color: LightBlue;
} 
</style>
 <div class="funkyradio">
        <div class="funkyradio-default">
            <input type="checkbox" Agar/>
            <label for="checkbox1">First Option default</label>
        </div>
        <div class="funkyradio-primary">
            <input type="checkbox" data-ng-model='search.type1' data-ng-true-value="'US'" data-ng-false-value=''/>US
            <label for="checkbox2">Second Option primary</label>
        </div>
    </div>
</div>
<body ng-app="myApp" ng-controller="myCont">
        <form align="center">

        //Search tab for all array
        Search Here<input type="text" name="uname" 
        ng-model="search" placeholder=" Enter data">
        Hide Salary <input type="checkbox"  ng-model="hideSalary">
        <table class="table table-hover" align="center" border="2">
            <thead id="search">
                <tr>
                   <th>pid</th>
                    <th>ename</th>
                    <th ng-hide="hideSalary">esalary</th>
                    <th>
                        ecity
                    </th>
                 </tr>   
            </thead>
            <tbody>
                <tr ng-repeat="x in filtered = (products | filter:search) | filter:search.type1 |  orderBy:'ename'">
                    <td>{{x.pid}}</td>
                    <td>{{x.ename | uppercase}}</td>
                    <td ng-hide="hideSalary">{{x.esalary }}</td>
                    <td>{{x.ecity}}</td>
                </tr>
            </tbody>
        </table>
        <span id="count">
            <hr>    
            Filtered list has {{filtered.length}} items
        </span>
    </form>
    </body>
    </html>

如何使用AngularJS使用复选框过滤JSON数组？

0 个答案: