如何根据angularjs中的名称和标题过滤数据?

时间:2015-01-23 08:16:34

标签: javascript angularjs angularjs-ng-repeat angular-filters

我正在尝试根据名称和标题过滤数据,但它无效。我已经尝试了所有场景,但它无法正常工作。请帮我找出解决方案。我收到列表中的所有数据,但无法根据名称和标题过滤数据。这是我的json数据,所以请提前帮助我解决这个问题。

{
    "0": {
        "data": {
            "_id": 0,
            "prefix": "Male",
            "firstname": "prem",
            "lastname": "Karn1",
            "phone": "23424242424",
            "email": "karnprem@cronj.com",
            "__v": 0,
            "zones": [
                "0"
            ]
        },
        "title": "Logistic Agent"
    }
}

<div class="panel-body">

                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label">by Name</label>
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                    <input type="text" value="" class="form-control" ng-model="searchText.data.firstname">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label">by Zone</label>
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                    <input type="text" value="" class="form-control" >
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label">by Title</label>
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                    <select class="form-control" name="title">
                                        <option value="">All</option>
                                        <option value="">Zone Manager</option>
                                        <option value="">Logistic agent</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <label class="col-lg-7 col-md-7 col-sm-7 col-xs-7 control-label">by Business Value</label>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                                    <input type="text" value="" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body form-group-separated">
                    <div class="table-responsive" >
                        <table class="table table-bordered" id="searchObjResults" >
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Title</th>
                                    <th>Telephone</th>        
                                    <th>Email Address</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr  ng-repeat="accDetails in acct_list  | filter:searchText">
                                    <td>
                                      <img src="/assets/img/a0.jpg" alt="User pic" height="30" width="30">
                                    </td>

                                    <td>{{accDetails.data.firstname}}</td>
                                    <td>{{accDetails.data.lastname}}</td>
                                    <td>{{accDetails.title}}</td>
                                    <td>{{accDetails.data.phone}}</td>
                                    <td>{{accDetails.data.email}}</td
                                </tr>
                              </tbody>
                        </table> 
                    </div>
                </div>

这是我的Plnkr http://plnkr.co/edit/BGOPyQ7c3v5qNASk5Kg7?p=preview

1 个答案:

答案 0 :(得分:0)

<input type="text" value="" class="form-control" ng-model="searchText.data.firstname">


<tr  ng-repeat="accDetails in acct_list  | filter:searchText"> </tr>   //don't bind searchText only rather

<tr  ng-repeat="accDetails in acct_list  | filter:searchText.data.firstname"></tr> //This will work only for firstname

对于多个标准使用更多管道过滤器....