使用 angularJS 扩展子级时隐藏父级的选择栏

Question

我正在尝试使用 JSON 中的 angularJS 创建示例应用程序。我创建了一个树状结构，可以在单击时展开，它显示相应的子节点。类似地，它隐藏子节点，再次使用点击折叠。

每次，我都会显示一个蓝色的选择栏，以指示展开的节点。每当展开一个子节点时，应该隐藏父节点上的选择节点。它工作正常，除非我为同一父节点扩展了 2 个子节点。

比如我在节点'ABC'下展开子节点'A' & 'B'时，也会出现'ABC'上的选择条，这是不正确的。理想情况下，它应该只在子节点上看到 - 'A & 'B'.

这在我只展开“1”或“3”个子节点时工作正常。我想切换 'obj.grandChild = !obj.grandChild; 有问题在 HTML.

你能帮我解决这个问题吗？

代码如下：

angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
  $scope.webs = [{
   'pageTitle': 'ABC',
   'pageUrl': 'http://www.example.net',
   'childPage': [{
    'subPageTitle': 'A',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'one',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'two',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'three',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'B',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'four',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'five',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'six',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'C',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'seven',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'eight',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'nine',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }]
  }, {
   'pageTitle': 'DEF',
   'pageUrl': 'http://www.example.net',
   'childPage': [{
    'subPageTitle': 'D',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'ten',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'eleven',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twelve',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'E',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'thirteen',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'fourteen',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'fifteen',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'F',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'sixteen',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'seventeen',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'eighteen',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }]
  }, {
   'pageTitle': 'GHI',
   'pageUrl': 'http://www.example.net',
   'childPage': [{
    'subPageTitle': 'G',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'nineteen',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twenty',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twnety one',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'H',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'twentytwo',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twentythree',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twentyfour',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'I',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'twentyfive',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twentysix',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twentyseven',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }]
  }];
}]);

.main-link {
  font-weight: bold;
}

.showChild {
  position: relative;
  left: 0;
  float: left;
  margin-right: 10px;
  top: 3px;
  color: grey;
  font-size: 1.3em;
}

.showGrandChild {
  position: relative;
  left: 0;
  float: left;
  margin-right: 10px;
  top: 7px;
  color: red;
  font-size: 0.75em;
}

.parentBar {
  display: inline-block;
  height: 15px;
  width: 2px;
  background-color: blue;
  position: relative;
  left: -45px;
  top: 4px;
  float: left;
}

.childBar {
  display: inline-block;
  height: 15px;
  width: 2px;
  background-color: blue;
  position: relative;
  left: -18px;
  bottom: 156px;
  float: left;
}

ul {
  list-style: none;
}

li {
  margin: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="obj in webs"> 
 <ul ng-init="obj.showChild = false;" ng-click="obj.showChild = !obj.showChild;">
   <li>
  <a ng-href="{{obj.pageUrl}}" class="main-link">{{obj.pageTitle}}</a>
  <i class="fa fa-arrow-down showChild" aria-hidden="true"></i>
  <span class="parentBar" ng-if="obj.showChild === true && obj.grandChild === false"></span> 
   </li>      
 </ul>
 <ul ng-init="child.showGrandChild = false; obj.grandChild = false;" ng-show="obj.showChild">
   <li ng-repeat="child in obj.childPage" ng-click="child.showGrandChild = !child.showGrandChild; obj.grandChild = !obj.grandChild;">
  <a ng-href="{{child.subPageUrl}}">{{child.subPageTitle}}</a>
  <i class="fa fa-arrow-down showGrandChild" aria-hidden="true"></i>
  <ul ng-show="child.showGrandChild">
    <li ng-repeat="grandChild in child.grandChild">
   <a ng-href="{{grandChild.grandChildPageUrl}}">{{grandChild.grandChildPageTitle}}</a>
    </li>
  </ul>
  <span class="childBar" ng-if="child.showGrandChild === true"></span>
   </li>      
 </ul> 
  </div>
</div>

Answer 1

我想这就是你想要的。你是对的，混淆是在 obj.grandChild === false 检查中。当您切换下一个 grandChild 时，它被设置回 false 因此将显示 Parent 的行。

我添加了一个名为 isChildrenShowing 的函数，如果 any 子项显示其孙子项，它将迭代并且 return 为真。 some.

上的 MDN 文档

$scope.isChildrenShowing = function(children) {
    return children.some(function(child) {
        return child.showGrandChild === true;
    });
}

这意味着不再需要 obj.grandChild。

angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
  $scope.isChildrenShowing = function(children) {
    return children.some(function(child) {
      return child.showGrandChild === true;
    });
  }
 
  $scope.webs = [{
   'pageTitle': 'ABC',
   'pageUrl': 'http://www.example.net',
   'childPage': [{
    'subPageTitle': 'A',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'one',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'two',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'three',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'B',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'four',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'five',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'six',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'C',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'seven',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'eight',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'nine',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }]
  }, {
   'pageTitle': 'DEF',
   'pageUrl': 'http://www.example.net',
   'childPage': [{
    'subPageTitle': 'D',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'ten',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'eleven',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twelve',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'E',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'thirteen',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'fourteen',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'fifteen',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'F',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'sixteen',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'seventeen',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'eighteen',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }]
  }, {
   'pageTitle': 'GHI',
   'pageUrl': 'http://www.example.net',
   'childPage': [{
    'subPageTitle': 'G',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'nineteen',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twenty',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twnety one',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'H',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'twentytwo',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twentythree',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twentyfour',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }, {
    'subPageTitle': 'I',
    'subPageUrl': 'http://www.example.net',
    'grandChild': [{
     'grandChildPageTitle': 'twentyfive',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twentysix',
     'grandChildPageUrl': 'http://www.example.net'
    }, {
     'grandChildPageTitle': 'twentyseven',
     'grandChildPageUrl': 'http://www.example.net'
    }]
   }]
  }];
}]);

.main-link {
  font-weight: bold;
}

.showChild {
  position: relative;
  left: 0;
  float: left;
  margin-right: 10px;
  top: 3px;
  color: grey;
  font-size: 1.3em;
}

.showGrandChild {
  position: relative;
  left: 0;
  float: left;
  margin-right: 10px;
  top: 7px;
  color: red;
  font-size: 0.75em;
}

.parentBar {
  display: inline-block;
  height: 15px;
  width: 2px;
  background-color: blue;
  position: relative;
  left: -45px;
  top: 4px;
  float: left;
}

.childBar {
  display: inline-block;
  height: 15px;
  width: 2px;
  background-color: blue;
  position: relative;
  left: -18px;
  bottom: 156px;
  float: left;
}

ul {
  list-style: none;
}

li {
  margin: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="obj in webs"> 
 <ul ng-init="obj.showChild = false;" ng-click="obj.showChild = !obj.showChild;">
   <li>
  <a ng-href="{{obj.pageUrl}}" class="main-link">{{obj.pageTitle}}</a>
  <i class="fa fa-arrow-down showChild" aria-hidden="true"></i>
  <span class="parentBar" ng-if="obj.showChild === true && isChildrenShowing(obj.childPage) === false"></span> 
   </li>      
 </ul>
 <ul ng-init="child.showGrandChild = false" ng-show="obj.showChild">
   <li ng-repeat="child in obj.childPage" ng-click="child.showGrandChild = !child.showGrandChild">
  <a ng-href="{{child.subPageUrl}}">{{child.subPageTitle}}</a>
  <i class="fa fa-arrow-down showGrandChild" aria-hidden="true"></i>
  <ul ng-show="child.showGrandChild">
    <li ng-repeat="grandChild in child.grandChild">
   <a ng-href="{{grandChild.grandChildPageUrl}}">{{grandChild.grandChildPageTitle}}</a>
    </li>
  </ul>
  <span class="childBar" ng-if="child.showGrandChild === true"></span>
   </li>      
 </ul> 
  </div>
</div>

使用 angularJS 扩展子级时隐藏父级的选择栏

Hide selection bar on parent when child is expanded using angularJS

angularjs

toggle

angularjs-ng-click

expand

angular-ng-if