AngularJS查询过滤器无法正常工作

时间:2016-08-12 17:45:37

标签: javascript html angularjs

我正在尝试使用动态文本查询过滤ng-repeat结果。它部分工作,但我试图让它过滤不同<div>元素的结果 - 它不起作用。 以下是适用的html代码段:

     <form class="form-inline">
        <input style="width:100%" ng-model="query" type="text" placeholder="Search Through {{clients.length}} Clients" autofocus>
        </form>
        <div class="container1">
        <div style="max-width:100%; border-width: medium; border-style: solid; border-color: gray" class="datagrid">
        <table> 
         <thead> 
          <tr> 
           <th> ID </th>
           <th> Name </th>
          </tr>
         </thead>
         <tbody>
          <tr ng-repeat="client in clients | filter: query | orderBy :'id' track by $index"">
           <td>
           {{client.id}}
           </td>
           <td> 
           <a ng-href = "client/{{client.id}}"><span style="color:#0000FF"> {{client.name}}</span></a> | <a ng-href = "docgen/{{client.id}}">Letters</a> | <a ng-href = "callog/{{client.id}}">{{client.lastcall}}</a> 
           </td>
          </tr>
         </tbody>
        </table>
       </div>
       </div>
       </div>
       </div>

我试图通过相同的搜索查询影响此部分:

    <tabset id="center"  align="center">
     <tab>
        <tab-heading style="text-align:left">
        <span ng-click="showme=0" style="text-align:left">Personal
        </span>
        </tab-heading>
              <div ng-show="showme=='0'" id="center" >

          <div class="container" id="wrapper">
          <div ng-controller="ClientCtrl">
          <form ng-submit="updateClient(updateform)" role="form" ng-init="updateform = {}">
              <div  id="center" class="datagrid">
                <table>
                  <thead>
                    <tr>
                      <th> ID </th>
                      <th> Phone </th>
                      <th> Address </th>
                      <th> Zip </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="client in clients | orderBy:'id' | filter: query | limitTo: 1 track by $index">
        <td>
         {{client.id}}
      </td>
      <td>
         <div class="form-group">
         <input class="form-control" ng-model="updateform.phone" name="phone" ng-init="updateform.phone=client.phone" type="text "/>
         </div>
        </td>
      <td>
      <div class="form-group">
         <input class="form-control" ng-model="updateform.address" name="address" ng-init="updateform.address = client.address" type="text "/>
        </div>
        </td>
      <td>
      <div class="form-group">
         <input class="form-control" ng-model="updateform.zip" name="zip" ng-init="updateform.zip = client.zip" type="text "/>
         </div>
        </td>
     </tr>
     </tbody>
   <thead>
      <tr>
       <th> SSN </th>
       <th> Age </th>
       <th> DOB </th>
       <th> DLN </th>
       </tr>
     </thead>
     <tbody>
      <tr ng-repeat="client in clients | orderBy: 'id' | filter: query | limitTo: 1 track by $index "">
                      <td>
                      <div class="form-group">
                        <input class="form-control" ng-model="updateform.ssn" name="ssn" ng-init="updateform.ssn = client.ssn" type="text" />
                        </div>
                      </td>
                      <td>
                      <div class="form-group">
                        <input class="form-control" ng-model="updateform.age" name="age" ng-init="updateform.age = client.age" type="text"/>
                        </div>
                      </td>
                      <td>
                      <div class="form-group">
                        <input class="form-control" ng-model="updateform.birthday" name="birthday" ng-init="updateform.birthday=client.birthday" type="text"/>
                        </div>
                      </td>
                      <td>
                      <div class="form-group">
                        <input class="form-control" ng-model="updateform.dln" name="dln" ng-init="updateform.dln = client.dln" type="text" />
                        </div>
                      </td>
                    </tr>
                  </tbody>
                    </table>
                <button type="submit" ng-click="updateClient()"><strong>Update</strong></button>
              </div>
            </div>
          </div>
         </form>

      </div>
      </tab>

我在角度控制器中也有这个:

$scope.query = "";

1 个答案:

答案 0 :(得分:0)

这取决于数据的结构。以下是它可能如何工作的示例:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="StarterApp">
    <body ng-controller="repeatCtrl">
                <table>
                  <thead>
                    <tr>
                      <th> ID </th>
                      <th> Phone </th>
                      <th> Address </th>
                      <th> Zip </th>
                    </tr>
                  </thead>
                  <tbody>
      <tr ng-repeat="client in clients | orderBy:'id' | filter: query | limitTo: 1 track by $index">
         <td ng-repeat="prop in client.clients">
            {{prop.id}}
           {{prop.phone}}
           {{prop.address}}
           {{prop.ZIP}}
         </td>
    </tr>
  </body>
</htm>
cell.txtvComment.selectable = YES;
cell.txtvComment.textColor = [Globals getTextColor]; //set your UIColor
cell.txtvComment.text = comment.commentText;
cell.txtvComment.selectable = NO;