如何在使用 ng-repeat 时将不同的 id 传递给 ng-click 函数

Question

这是我的 HTML 代码。在此我从 ng-repeat 获取多个值，对于每个值，我希望各自的按钮显示和隐藏两个 div 元素。在我的网页中，来自不同成员块的按钮正在工作只显示/隐藏第一个成员块...对于我通过 ng-repeat 获得的所有成员，id=round 的按钮应该切换 id= first 和 id= second 的 btw div 元素。

 <section id="team">
  <div ng-controller="teamController as tctrl">
   <div class="container">
    <div class="row">
     <div class="col-md-3 bord" ng-repeat="member in tctrl.members">
      <button id="round" ng-click="showHide($index)">
        <img id="direction" src="img/icon/uparrow.png">
      </button>
      <img ng-src="{{member.image}}">
      <div id="first" class="memberabout" >
        <h3 ng-bind="member.title"></h3>
        <h2 ng-bind="member.name"></h2>     
      </div>            
      <div id="second" class="hid" >
        <p ng-bind="member.about"></p>
      </div>
     </div>
    </div>
   </div>
  </div>
 </section>

这是我正在尝试使用的 js 函数：

$scope.showHide = function(index) {
    if (document.getElementById('first') !== undefined) {
     if (document.getElementById('first').style.display == 'none') {
        document.getElementById('first').style.display = 'block';
        document.getElementById('second').style.display = 'none';
        var down = document.getElementById('round');
        down.style.top = "201px";
        var direction = document.getElementById('direction');
        direction.src = 'img/icon/uparrow.png';
      } else {
        document.getElementById('first').style.display = 'none';
        document.getElementById('second').style.display = 'block';
        var down = document.getElementById('round');
        down.style.top = "71px";
        var direction = document.getElementById('direction');
        direction.src = 'img/icon/arrowdown.png';
      }
     }
   };

我应该如何传递 id 以便每个按钮都可以显示/隐藏其块中的 div 元素？

Answer 1

Angularjs 有许多选项可以在您的应用程序中使用jQuery 取消； modeling、directive 等选项...

在您的情况下，您不需要使用 id，因为当我们使用 ng-repeat 时，实际上所有项目都是唯一的，所以我们只是使用它们来显示/隐藏或您可以使用 object 执行的许多其他选项ng-repeat。

我希望这个示例可以帮助您弄清楚如何使用它：

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  var main = this;

  main.members = [{
      image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4f5PCRqcMgg_KHymC29ABsy-PDFI08mb6qHqMviqbDDHjjuYM9g",
      title: "A",
      name: "jack",
      about: "Hello World"
    },
    {
      image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAxySZHmSrUU1_iIFJHGdDTdmTCAE610QnPwptWGWbMRAbSUzgNA",
      title: "B",
      name: "philip",
      about: "Hello World 2"
    }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div ng-app="app" ng-controller="ctrl as tctrl">
  <section id="team">
    <div class="container">
      <div class="row">
        <div class="col" ng-repeat="member in tctrl.members">
          <small>this is unique id if you want to use it: <b>id_{{$index}}</b> </small>
          <div class="card">
          <button ng-click="member.show = !member.show">
                        show/hide
                    </button>
          <img ng-src="{{member.image}}">
          <div ng-hide="member.show">
            <h3 ng-bind="member.title"></h3>
            <h2 ng-bind="member.name"></h2>
          </div>
          <div ng-show="member.show">
            <p ng-bind="member.about"></p>
          </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>