角指令，用于检查子元素的数量

Question

因此，我有一个简单的ul，ng-重复来自外部源的li元素，并承诺。我还有一个搜索输入，可以过滤这些元素，当ul不包含满足搜索要求的元素时，我希望它能够隐藏起来。

我制定了这个指令，但没有用：

.directive('predictive', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            console.log(element);
            if (!$(element).children("li").length) {
                $(element).hide();
            }
        }
    }
});

但是这个指令隐藏了所有的东西，因为它应用得太快了，在获取数据的服务用li来填充列表之前。

我能做些什么吗？

编辑:标记

<input type="text" ng-model="predictiveSearch"></input>

<ul ng-repeat="(key, option) in Service1.predictive" predictive>
        <span><b>{{key}}</b></span>
        <li ng-repeat="option in option | filter:predictiveSearch">
          <a href="" ng-click="handlePredictiveSelection(option)">{{option}}</a>
        </li>
</ul>

Answer 1

您可以使用ng-repeat的筛选别名并在ng-if中检查该长度。

<ul ng-repeat="(key, option) in Service1.predictive" ng-if="filteredArray.length">

        <li ng-repeat="option in option | filter:predictiveSearch as filteredArray">

        </li>
</ul>

Answer 2

您可以尝试使用<ul ng-repeat="(key, option) in Service1.predictive" ng-hide="(option | filter:predictiveSearch).length == 0">，而不是创建自定义指令。

你的选择会被过滤两次。如果其中有很多，最好是在自定义指令中进行过滤，以便只执行一次，并使用element.hide()而不是ng-hide隐藏元素。

.directive('predictive', function($filter) {
return {
    restrict: 'A',
    link: function(scope, element) {
        var filter = $filter('filter');

        scope.watch('predictiveSearch', function(value) {
            scope.innerOptions = filter(scope.option, value);
            if (!scope.innerOptions.length) {
                element.hide();
            }
        });

    }
}});

现在，您应该能够在innerOptions：ng-repeat="option in innerOptions"上进行迭代，并在指令中完成一次筛选。