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

Question

我有一个 ng-repeat 用于显示产品列表。有一个文本框，用于搜索其中的产品。当我搜索产品时。在 Controller 中，我可以看到搜索结果，但 View 没有改变。当我使用 $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>

Controller

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 代码:

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