Question

我有一个ng-repeat用于显示产品列表。有一个用于搜索其中产品的文本框。当我在搜索产品时。在控制器中，我可以看到搜索结果，但在视图中没有变化。当我使用$scope.$apply()时，它可以正常工作但如何在没有$scope.$apply()

的情况下修复它

<div class="listview lv-bordered lv-user ">
    <div class="lv-header-alt clearfix ">
        <h2 class="lvh-label ">Records
        </h2>
        <div class="lvh-search">
            <input type="text" id="product_search_text" onfocus="this.select();" name="product_search" ng-model="rbc.search" ng-change="rbc.productsSearchChanged();"
                placeholder="Lookup" class="lvhs-input">
        </div>
    </div>
    <div class="lv-body bgm-white">
        <h5 class="text-muted p-10 m-0" ng-hide="rbc.recipe_products.length">No Search result found</h5>
        <div class="lv-item media" ng-repeat="product in rbc.recipe_products ">
            <div class="pull-right">
                <ul class="actions">
                    <li ng-if="product.can_be_an_ingredient">
                        <a href="" ng-click="rbc.addProductsToIngredients(product);">
                            <i class="zmdi zmdi-plus"></i>
                        </a>
                    </li>
                    <li ng-if="!product.can_be_an_ingredient">
                        <a href="" tooltip-placement="left" uib-tooltip-html="product.location_tooltip">
                            <i class="zmdi zmdi-info"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="media-body">
                <div class="lv-title ">{{ ::product.name }}&nbsp;
                    <i>({{ ::product.fnb_uom_abbreviation }})</i>
                </div>
                <div class="lv-small">{{ ::product.code }} / {{ product.category }}</div>
            </div>
        </div>
    </div>
</div>

控制器

var searchTimeout;
self.productsSearchChanged = function () {
    if (searchTimeout) {
        clearInterval(searchTimeout);
    }
    searchTimeout = setTimeout(function () {
        var search_result = $filter('filter')(products, self.search);
        self.recipe_products = angular.copy($filter('limitTo')(search_result, 10));
        console.log(self.recipe_products);
        // $scope.$apply();
    }, 500);

};

Answer 1

您可以在ng-repeat指令中应用过滤器。 HTML代码：

<div ng-app="searchApp">
<div ng-controller="searchCtrl">
    Search : <input type="text" ng-model="search"/>
    <ul ng-repeat="country in countries | filter:search">
        <li>{{country.name}}</li>
    </ul>
    <p ng-show="(countries | filter:search).length==0"> No search result</p>
</div>
</div>

Angular Code：

var app = angular.module("searchApp",[]);
app.controller("searchCtrl", function($scope){
    $scope.countries = [{id:1, name: "Afghanistan"}, 
                        {id:2, name: "Albania"},
                        {id:3, name: "Algeria "},
                        {id:4, name: "American Samoa "},
                        {id:5, name: "Andorra "},
                        {id:6, name: "Angola "},
                        {id:7, name: "Anguilla "},
                        {id:8, name: "Antigua & Barbuda "},
                        {id:9, name: "Argentina "},
                        {id:10, name: "Armenia "},
                        {id:11, name: "Aruba "},
                        {id:12, name: "Australia "},
                        {id:13, name: "Austria "},
                        {id:14, name: "Azerbaijan "},
                        {id:15, name: "Bahamas, The "},
                        {id:16, name: "Bahrain "}];

});

结果：

Demo

ng-repeat数据仅在文本框焦点更改后更新

1 个答案: