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

【问题标题】：AngularJS - $watch <ul> children length issueAngularJS - $watch <ul> 儿童长度问题
【发布时间】：2015-01-28 23:31:32
【问题描述】：

我有以下 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-if 而非 ng-repeat 过滤器。

我想使用以下指令管理“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”每增加两个字母！

为什么？我该如何解决？

【问题讨论】：

你为什么不检查长度..？ ng-if="dataset.length===0"
因为 dataset.length 没有改变。
"console.log" 每增加两个字母是什么意思 是什么意思？
如果我只输入一个字母，什么也没有发生，而日志在第二个写入。在第三个什么都没有......第四个日志写入等......
你为什么查看 DOM 却没有结果。只需检查过滤的数据结果。 这不是那么有角度的方式，你做了太多只是为了显示没有结果，你在指令中的逻辑，因为它需要 DOM 依赖于角度摘要循环。而且不清楚你在说什么，也许是一个演示？。

标签： angularjs dom directive watch

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

【讨论】：

谢谢，但我更喜欢使用 ng-if 而不是 ng-repeat 过滤器。

【解决方案2】：

终于找到了，把这个加到控制器里：

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

但这是临时工作..
我知道我想做的是不是 AngularJS 方式。

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

【讨论】：