Я хочу выполнить поиск таблицы с несколькими текстовыми полями. Пользователь должен иметь возможность вводить адрес в поле адреса и искать в таблице свой адрес, а также вводить город в поле поиска города и искать таблицу по городам. Я не могу заставить его работать, я получаю сообщение об ошибке: Ошибка: [$ rootScope: infdig] Достигнуто 10 $ digest() итераций. Aborting!
Вот мой 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'
}
]
});
})();
Какие-нибудь подсказки о том, что я делаю неправильно?
Посмотрите:
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>
Вы забыли объект vm. В вашем фильме должны использоваться vm.search_city и vm.search_address:
<tr ng-repeat="search in vm.searchs | filter: {address: vm.search_address, city: vm.search_city}">