两种过滤方式不起作用（AngularJS）答案

【问题标题】：Doesn't work two ways of filtering (AngularJS)两种过滤方式不起作用（AngularJS）
【发布时间】：2015-09-17 03:02:52
【问题描述】：

我正在尝试使用两种过滤方式（通过单击字母或通过在输入字段中输入）。

<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);

乍一看，一切正常，但只有第一眼才如此......

起初我点击任何字母时 - 过滤器效果很好。然后我在输入字段中输入 - 过滤器效果很好。但是在我输入输入字段或通过“退格”按钮从那里删除文本后 - 通过单击字母进行过滤停止工作......

为什么会这样，我该如何解决这个问题？这是我的DEMO

提前谢谢！

【问题讨论】：

问题是范围继承。在您实际输入输入字段的那一刻，CountriesController 的范围将具有它自己的 search 值，并且不再从 MainController 继承它。如果您关注dot-rule，则可以解决此问题。

标签： javascript jquery angularjs filter filtering

【解决方案1】：

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

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

如果您删除 CountriesController，请查看 working demo。

【讨论】：

感谢您的解释。但可能会更好添加'$parent'。到'ng-model="search"'，以防万一在另一个页面上我只需要使用国家控制器而不过滤点击？

【解决方案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>

【讨论】：

您的 sn-p 代码运行良好？我认为它显示错误:(
不，这里没有显示任何错误是 plnkr plnkr.co/edit/xZPEb9Y6eI3jZq0ppOiv?p=preview
实际上添加了 '$parent.' to ;ng-model="search"' 效果很好
@TahaAmineZeghbib 我仍在您的回答和 Ramesh Rajendran 的回答之间进行选择