AngularJS：根据隐藏的子代数隐藏父代

Question

I have the following code:

<div ng-hide="items.length == 0">
    <li ng-repeat="item in items" ng-hide="item.hide == true">
        {{ item.name }} <hide-button />
    </li>
</div>

Imagine that I have 10 items. When I click the button, I set the item.hide to true and the item disappear. When I hide all 10 items, I want to hide the main div. What's the best way to achieve this with AngularJS?

Answer 1

An approach might be to use a function like this:

$scope.checkItems = function () {
    var total = $scope.items.length;
    for (var i = 0; i < $scope.items.length; ++i) {
        if ($scope.items[i].hide) total--;
    }
    return total === 0;
};

and change the ngHide attribute on the outer div:

ng-hide="checkItems()"

jsfiddle : http://jsfiddle.net/u6vkf6bt/

Another approach is to declare a $scope.allHidden variable and watch over the array like this:

$scope.$watch('items', function (newItems) {
    var all = true;
    for (var i = 0; i < newItems.length; ++i) {
        if (newItems[i].hide !== true) all = false;
    }
    $scope.allHidden = all;
}, true);

This is checking when anything inside the array is changed, and check if all the hide attributes are set to true.

Then set it on the ngHide attribute:

ng-hide="allHidden"

jsfiddle : http://jsfiddle.net/u6vkf6bt/1/

Among the two, I would choose the first approach, because deep watching may cause performance issues:

This therefore means that watching complex objects will have adverse memory and performance implications.

From here , under $watch(watchExpression, listener, [objectEquality]); when objectEquality is set to true.

Answer 2

Yet another approach would be updating the counter of hidden items whenever a single item is hidden. Of course this would require the hiding code to be placed within your controller, like this:

$scope.allHidden = false;
// if items can have hide = true property set already from the start
var hiddenItems = $scope.items.filter(function (item) { 
    return item.hide; 
}).length;
// or if they are all initially visible, a straightforward approach:
// var hiddenItems = 0;
$scope.hideItem = function (item) {
    item.hide = true;
    hiddenItems++;
    if (hiddenItems === $scope.items.length) {
        $scope.allHidden = true;
    }
}

and the hiding would need to be done like this:

<li ng-repeat="item in items" ng-hide="item.hide == true">{{ item.name }}
    <button ng-click="hideItem(item)">hide</button>
</li>

jsfiddle : https://jsfiddle.net/723kmyou/1/

Pros for this approach

• no need to iterate over the full items array when doing the "should main div be hidden?" check -> possibly better performance

Cons for this approach

• you need to place the hideItem function inside your controller

Answer 3

A couple of reasons why I didn't like the other solutions:

• Time complexity is always O(n). instead of counting how many items are visible/hidden - a number we do not care about at all in this problem - we should just ask if there's at least one visible. better performance.
• Not reusable enough.

My preferred solution is to actually look for the first visible item: http://plnkr.co/edit/FJv0aRyLrngXJWNw7nJC?p=preview

angular.module('MyApp',[]);

angular.module('MyApp').directive('myParent', function(){
    return {
      restrict: 'A',
      link:function(scope, element){
        scope.$watch(function(){
          return element.find('>:visible:first').length > 0;
        }, function( visible ){
            if ( visible ){
              element.show(); 
            }else{
              element.hide(); 
            }
        })
      }
    }
});

<div my-parent>
  <div class="hidden">one child</div>
  <div class="hidden">another child</div>
</div>
<div my-parent>
  <div class="hidden">third child</div>
  <div>another child</div>
</div>

You can even expand this by passing a selector to 'my-parent' attribute to be used in the directive. allows to better specify which items to look for.

I like this approach as it has almost no assumptions. This can be used for any scenario where children might be hidden. not necessarily ng-repeat . However the watch might be costly as we're using a :visible selector.

another - assuming ng-repeat is involved - is to watch the value on the scope - http://plnkr.co/edit/ZPVm787tWwx9nbJTNg1A?p=preview

app.directive('myParent', function(){
    return{
      restrict: 'A',
      link: function(scope, element,attrs){
         scope.$watch(function(){
         try{
             value = scope.$eval(attrs.myParent);
             var i = value.length-1;
             for ( ; i >= 0; i-- ){
                if ( value[i].hide != false ){
                  return true;
             }
          }
       }catch(e){
           return false
       }
        return false;
     }, function( newValue ){       
            if ( !!newValue ) { element.show(); } else {  element.hide();}
        })
    }
 }});


<ul my-parent="awesomeThings">
  <li ng-repeat="thing in awesomeThings">{{thing.value}}</li>
</ul>

The watch here might be less costly, not sure, but it doesn't handle the dom, so there's a good chance for that..

While this is very similar to other solutions, it is implemented as a highly reusable directive, and looks for the first visible item.

In my solutions I also assume jquery is available. There are many other ways to implement this if required: AngularJS: element.show() in directive not working

regarding watch performance, not sure which way is better. I am using a function to evaluate the watched value and I am not sure if this is the best way to handle it.