AngularJS - $watch
children length issue

Question

I've the following html list :

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

I prefer use the ng-if than the ng-repeat filter.

And I want to manage the 'noresult' display with the following directive :

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();}
            }
          );
        } 
}}]);

When I type something into the input, "console.log" raises each two letters !

Why ? And how can I fix it ?

Why don't you just check the length..? `ng-if="dataset.length===0"` — tymeJV, Jan 27 '15 at 16:11
If I type only one letter, nothing happend, and on the second the log writes. On the third nothing.. fourth log writes ect... — CheapD AKA Ju, Jan 27 '15 at 16:25
Why are you looking at the DOM to show no result. Just check for the data result filtered. _This is not so angular way and you are doing too much just to show no result, your logic in the directive since it needs DOM relies on angular digest cycle_. And it is unclear what you are saying, a demo perhaps?. — PSL, Jan 27 '15 at 16:27

score 0 · Answer 1 · answered Jan 27 '15 at 16:32

0

May I suggest the following, without using a directive ?

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

And add a function in the controller:

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

Fiddle

answered Jan 27 '15 at 16:32

Omri Aharon

16,959
5
40
58

Thanks, But I prefer use the ng-if than the ng-repeat filter. – CheapD AKA Ju Jan 27 '15 at 16:34

score 0 · Accepted Answer · answered Jan 28 '15 at 15:31

I finally found, adding this to controller:

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

But it's makeshift job..
I understand that what I wanted to do was not The AngularJS Way.

But, filter's algorithms must be in the object and not just anywhere.
It's The Object Way!

AngularJS - $watch children length issue

2 Answers2

AngularJS - $watch
children length issue