Question

我正试图以角度切换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”
        }
    ];

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

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

JS

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

Answer 2

向数组添加其他布尔属性，并将该属性分配给ng-hide。然后在里面点击功能改变该属性的布尔值。

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>

以角度切换可见性

2 个答案: