Angular JS Filter未在ng-repeat中应用

时间:2017-08-04 04:54:07

标签: angularjs angularjs-directive angularjs-scope angularjs-filter

我有一个输入类型搜索元素。我无法对此应用过滤器。

<label class="item-input-wrapper" style="font-size:20px!important;">
  <i class="icon ion-ios-search placeholder-icon"></i>
  <input type="search" style="width:45%;font-size:20px!important;" placeholder=" Search" ng-model="searchText.text">
</label>

在这种情况下,过滤器未应用,如果我不使用ng-if,我可以应用过滤器。请帮忙,因为我不想删除ng-if因为我有理由保留它。

<div class="w-clearfix product-row" ng-show="isListViewShown" **ng-repeat="product in arrayOfProducts | 
        filter : searchText.text " ng-if="$index % 4 === 0">**
                        <div class="_4-col" ng-if="$index < 
        arrayOfProducts.length">
                           product.name 

    </div>
</div>

1 个答案:

答案 0 :(得分:1)

试试这个可能会对你有帮助。

angular.module('myApp', []).controller('ctrl', function($scope) {

$scope.searchText = '';

$scope.names = ['India','America','Japan','Denmark','Russia','Landon','Cuba','Finland','Italy','Shrilanka','Australia','Brazil','Canada'];
});
    
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="ctrl">
<input type="search" ng-model="searchText" />
<ul>
  <li ng-repeat="x in names | filter : searchText" ng-if="$index % 4 === 0">
    {{ x }}
  </li>
</ul>
</div>


</body>
</html>