AngularJS

Question

我有以下 html 列表：

<input ng-model="searchValue" />
[...]
<ul>
  <li ng-repeat="item in dataset" ng-if="item.contains(searchValue)">{[item.name]}</li>
  <li noresult>No result ...</li>
</ul>

比起 ng-repeat 过滤器，我更喜欢使用 ng-if。

我想使用以下指令管理 'noresult' 显示：

directive('noresult', [
    function () {return {
        restrict: "A",
        link : function (scope, element, attrs) {
          scope.$watch(
            function () { return element.parent().children().length; },
            function (length) {
                console.log(length)
                if(length == 1){element.show();}
                else{element.hide();}
            }
          );
        } 
}}]);

当我在输入中输入内容时，"console.log" 每两个字母加一次！

为什么？我该如何解决？

Answer 1

我可以在不使用指令的情况下提出以下建议吗？

<input ng-model="searchValue" />

<ul>
  <li ng-repeat="item in filteredSet = (dataset | filter:searchValue)" ng-if="showItem(item, searchValue)">{{item}}</li>
  <li  ng-if="filteredSet.length == 0">No result ...</li>
</ul>

并在控制器中添加一个函数：

$scope.showItem = function(item, searchVal) {
    return !searchVal || item.indexOf(searchVal) > -1;
}

Fiddle

Answer 2

我终于找到了，将其添加到控制器中：

$scope.$watch('searchValue', function(){
    $timeout(function(){
        $scope.$apply();
}),1});

但这是临时工作..
我明白我想做的是而不是AngularJS方式。

但是，过滤器的算法必须在对象中，而不是在任何地方。
它是对象方式！

AngularJS - $watch <ul> 儿童长度问题

AngularJS - $watch <ul> children length issue

dom

directive

watch