Question

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

 <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的cancle有很多选项; modeling，directive等选项......

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

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

＆＃13;

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"
    }
  ];
});

＆＃13;

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

＆＃13;

如何在使用ng-repeat到ng-click功能时传递不同的id

1 个答案: