以角度切换可见性答案

【问题标题】：Toggle visibility in angular以角度切换可见性
【发布时间】：2017-07-29 12:50:12
【问题描述】：

我正在尝试以角度切换 div 的可见性这是我的看法：

<div ng-repeat="item in data  | orderBy:'address' | groupBy:'address'" >
    <h5 onclick="toggle_visibility('item1');">{{item.address}}</h5>
      <div id="item1">
           <ul>
               <li>First Name: {{item.firstname}}  </li>
           </ul>
      </div>

在控制器中：

$scope.data = [
        {
            firstname: "user",
            address: “address1”
        },
        {
            firstname: "user1",
            address: “address2”
        },
        {
            firstname: "user2",
            address: “address1”
        }
    ];

问题是，当我单击任何地址标题时，它会在第一个标题中隐藏或显示名字，而当我单击地址标题时，它应该会在我单击的地址标题中显示或隐藏名字它。我该如何解决这个问题？

【问题讨论】：

标签： angularjs

【解决方案1】：

HTML

<div ng-repeat="item in data  | orderBy:'address' | groupBy:'address'" >
    <h5 ng-click="toggle_visibility(item);">{{item.address}}</h5>
      <div ng-hide="item.invisible">
           <ul>
               <li>First Name: {{item.firstname}}  </li>
           </ul>
      </div>

$scope.toggle_visibility = function(item) {
    item.invisible = !item.invisible
}

【讨论】：

你应该在 html 中使用 ng-click 而不是 onclick
@Gaurav 它正在工作！谢谢！但是为什么 groupBy 不起作用？它不会在同一个组中带来相同的地址？
看到这个stackoverflow.com/questions/25921427/…
@Gaurav 我确实投了票，只是没有出现，因为它说我的声望低于 15，所以它不会公开分享
好的，没问题@ITDeveloper

【解决方案2】：

向数组添加额外的布尔属性并将该属性分配给 ng-hide。然后在 click 函数中更改该属性的布尔值。

angular.module("app",[])
.controller("ctrl",function($scope){
	$scope.data = [
        {
            firstname: "user",
            address: "address1",
            hideAddress : false
        },
        {
            firstname: "user1",
            address: "address2",
            hideAddress : false
        },
        {
            firstname: "user2",
            address: "address3",
            hideAddress : false
        }
    ];
    
    $scope.toggle_visibility = function(item){
       item.hideAddress = !item.hideAddress;
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="item in data  | orderBy:'address' " >
    <h5 ng-click="toggle_visibility(item);">{{item.address}}</h5>
      <div ng-hide="item.hideAddress">
           <ul>
               <li>First Name: {{item.firstname}}  </li>
           </ul>
      </div>
    </div>
</div>

【讨论】：