AngularJS查詢過濾器不工作

我正在嘗試使用動態文本查詢過濾ng-repeat結果。它部分工作，但我試圖讓它過濾不同的<div>元素的結果 - 它不起作用。下面是HTML片段，它的工作原理：AngularJS查詢過濾器不工作

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

來源

2016-08-12 Johnathan Mackney

你可能有更好的運氣製作成服務這一點，而不是一個控制器。請記住，控制器不應該提供代碼功能，它應該。這是服務/工廠的責任。儘可能減少你的控制器。 –

這將取決於您的數據結構。下面是它是如何發揮作用的例子：

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

 
app.controller("repeatCtrl", ['$scope', function($scope) { 
 
    $scope.clients = [ 
 
     { 
 
     "id": "2013-W45", 
 
     "clients": [ 
 
      { 
 
      "id": "1", 
 
      "phone": "454-45686", 
 
      "clientName": "Client1", 
 
      "address": "ExampleAddress", 
 
      "ZIP": 24971, 
 
      "jobs": [ 
 
       { 
 
       "name": "ClientName", 
 
       "jobs": [ 
 
        { 
 
        "name": "someproject", 
 

 
        } 
 
       ] 
 
       }, 
 
       { 
 
       "name": "work 9-5", 
 

 
       } 
 
      ] 
 
      }, 
 
     ] 
 
     }, 
 
     { 
 
     "id": "22432", 
 
     "clientInfo": [ 
 
      { 
 
      "dow": "1", 
 
      "clientName": "Client2", 
 
      "jobs": [ 
 
       { 
 
       "name": "JobName", 
 
       "jobs": [ 
 
        { 
 
        "name": "someProjetName", 
 

 
        } 
 
       ] 
 
       }, 
 
       { 
 
       "name": "work 9-5", 
 

 
       } 
 
      ] 
 
      }, 
 
     ] 
 
     } 
 

 
    ] 
 
}]);

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

來源

2016-08-12 20:35:53 chuckmcquilkin

AngularJS查詢過濾器不工作

回答

相關問題