gpt4 book ai didi

javascript - 两种过滤方式不起作用(AngularJS)

转载 作者:搜寻专家 更新时间:2023-11-01 04:24:06 26 4
gpt4 key购买 nike

我正在尝试采用两种过滤方式(通过单击字母或在输入字段中键入)。

<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

提前致谢!

最佳答案

使用两个 Controller 的问题根源。如果您删除 CountriesController ,那么一切正常。

Search 值与使用该范围对象的 Controller 相混淆。我认为您不需要为此场景实现两个 Controller

参见 working demo如果您删除 CountriesController

关于javascript - 两种过滤方式不起作用(AngularJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31136189/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com