AngularJS搜索多個文本框

我想要搜索多個文本框的表。用戶應該能夠在地址欄中輸入地址並在表格中搜索我的地址，然後在城市搜索框中輸入城市並按城市搜索表格。我得不到它的工作，我收到錯誤消息：錯誤：[$ rootScope：infdig] 10 $ digest（）迭代到達。中止！AngularJS搜索多個文本框

這裏是我的html：

<table> 
    <thead> 
     <tr> 
      <th> 
       Address 
      </th> 
      <th> 
       City 
      </th> 
     </tr> 
     <tr> 
      <td> 
       <input ng-model="vm.search_address" /> 
      </td> 
      <td> 
       <input ng-model="vm.search_city" /> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="search in searchesFound = (vm.searches | filter: {address: search_address, city: search_city})"> 
      <td> 
       {{ search.address }} 
      </td> 
      <td> 
       {{ search.city }} 
      </td> 
     </tr> 
    </tbody> 
</table>

，這裏是我的控制器：

(function() { 

angular.module('crm.ma')   
    .controller('AdvancedSearchCtrl', function() { 
     var vm = this; 

     vm.search_address = ""; 
     vm.search_city = ""; 


     vm.searchs = [ 
      { 
       address: '202 This St', 
       city : 'Columbus' 
      }, 
      { 
       address: '205 That St', 
       city: 'Dayton' 
      } 
     ] 

    }); 
})();

任何線索什麼我做錯了嗎？

來源

2015-10-29 hollyquinn

你有沒有嘗試刪除大括號？ –

@DannyFardyJhonstonBermúdez給我錯誤消息錯誤：[$ parse：syntax]語法錯誤：令牌'，'是意想不到的，期待[]]在[searchFound =（vm.searches | filter：address：search_address，city：search_city）]開始的表達式[]的第64列開始[，city：search_city]]。 – hollyquinn

你忘了vm對象。在你的過濾器vm.search_city和vm.search_address應使用：

<tr ng-repeat="search in vm.searchs | filter: {address: vm.search_address, city: vm.search_city}">

來源

2015-10-29 16:01:39

嗨Benoit。對不起，花了我很長時間纔回到這裏，但這並沒有解決問題。我仍然沒有得到任何結果。有沒有別的我做錯了？ – hollyquinn

獲取錯誤消息錯誤：[expression：[vm.searches | filter：address：vm.search_address，...]中的列67的[[parse：syntax]語法錯誤：令牌'，'是意外的，期望[]] city：vm.search_city）]從[，city：vm.search_city）開始]。 http://errors.angularjs.org/1.4.7/$parse/syntax?p0=%2C&p1=is%20unexpected%2C%20expecting%20%5B）％5D＆p2 = 67＆p3 = searchesFound％20％3D％20（％20vm.searches％20％7CNaNilter％3A％20address％3A％20vm.search_address％2C％city％3A％20vm.search_city）＆p4 =％2C％city％3A％20vm.search_city） – hollyquinn

你是對的，我回答太快了。正確的語法應該是「在vm.searchs中搜索|過濾器：{address：vm.search_address，city：vm.search_city}」 –

看看這個：

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

 
app.controller('MainCtrl', ['$scope', function ($scope) { 
 
    $scope.smartphones = [ 
 
     {brand: 'Apple', model: 'iPhone 4S', price: '999'}, 
 
     {brand: 'Samsung', model: 'SIII', price: '888' }, 
 
     {brand: 'LG', model: 'Optimus', price: '777'}, 
 
     {brand: 'htc', model: 'Desire', price: '666'}, 
 
     {brand: 'Nokia', model: 'N9', price: '555'} 
 
    ]; 
 
    
 
    $scope.search = function(){ 
 
     angular.forEach($scope.smartphones, function(value, key) { 
 
      var brand = ($scope.queryBrand? $scope.queryBrand.toLowerCase():' '); 
 
      var model = ($scope.queryModel? $scope.queryModel.toLowerCase():' '); 
 
      
 
      value.show = (value.brand.toLowerCase().indexOf(brand) > -1 || 
 
          value.model.toLowerCase().indexOf(model) > -1 || (brand == ' ' && model == ' ')); 
 
      
 
      console.log(!brand && !model) 
 
     }); 
 
    } 
 
}]);

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

 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
 

 

 
<div ng-app="ngApp" ng-controller="MainCtrl" class="container"> 
 

 
<input class="span4 pull-right" type="text" placeholder="Filter by brand" ng-model="queryBrand" ng-change="search()"> 
 
<input class="span4 pull-right" type="text" placeholder="Filter by model" ng-model="queryModel" ng-change="search()"> 
 

 
<div class="row"> 
 
    <table id="results" class="table table-striped table-bordered table-hover"> 
 
     <thead> 
 
     <tr> 
 
      <th>Brand</th> 
 
      <th>Model</th> 
 
      <th>Price</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="smartphone in smartphones" ng-init="smartphone.show=true" ng-show="smartphone.show"> 
 
      <td id="brand">{{smartphone.brand}}</td> 
 
      <td id="model">{{smartphone.model}}</td> 
 
      <td id="price">{{smartphone.price | currency}}</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div> 
 
    </div>

來源

2015-11-04 17:22:03

AngularJS搜索多個文本框

回答

相關問題