Question

我试图采用两种方式进行过滤（通过点击字母或在输入字段中输入内容）。

<body ng-controller="MainController">
    <ul search-list=".letter" model="search">
        <li class="letter" ng-repeat="letter in alphabet.letter">{{ letter }}</li>
    </ul>

    <div class="container" ng-controller="CountriesController">

        <input id="q" type="text" ng-model="search " />
        <ul>
            <li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
        </ul>

    </div>
</body>

和js：

var app = angular.module('demo', []);
var controllers = {};
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");



app.directive('searchList', function() {
    return {
        scope: {
            searchModel: '=model'
        },
        link: function(scope, element, attrs) {
            element.on('click', attrs.searchList, function() {
                scope.searchModel = $(this).text();
                scope.$apply();
            });
        }
    };
});

controllers.MainController = function($scope) {
    $scope.setTerm = function(letter) {
        $scope.search = letter;
    };
    $scope.alphabet = {
      letter: alphabet
    }
};
controllers.CountriesController = function($scope){

  $scope.countries = {
    country:['Ukraine','Urugvai','Russia','Romania','Rome','Argentina','Britain']
  }
  $scope.startsWith = function (actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
  }
};



app.controller(controllers);

首先看一切都运转良好，但只有在第一次看时......

一开始我点击任何字母 - 过滤器效果很好。那时我输入输入字段 - 过滤效果很好。但是在我输入输入字段或从那里删除文本后，通过＆＃39;退格＆＃39;按钮 - 通过单击字母过滤停止工作...

为什么它会像这样工作以及如何解决这个问题？这是我的DEMO

提前Thanx！

Answer 1

使用两个控制器的问题源。如果您删除CountriesController，那么一切正常。

Search值与使用该范围对象的控制器混淆。我认为您不需要为此方案实现两个控制器

如果删除CountriesController，请参阅working demo。

Answer 2

将html的这一部分改为此工作正常（ng-model =“$ parent.search”）

   <div class="container" ng-controller="CountriesController">

        <input id="q" type="text" ng-model="$parent.search " />
        <ul>
            <li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
        </ul>

    </div>

没有两种过滤方式（AngularJS）

2 个答案: