如何在使用 ng-repeat 时将不同的 id 传递给 ng-click 函数
How to pass different id's while using ng-repeat to an ng-click function
这是我的 HTML code.In 我正在从 ng-repeat 中获取多个值,对于每个值,我希望相应的按钮显示和隐藏两个 div elements.In 我的网页,来自不同成员块的按钮仅适用于 show/hide 第一个成员块...带有 id=round 的按钮应该切换 btw div id= first 和 id= 的元素其次是我通过 ng-repeat 获得的所有成员。
<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 以便每个按钮都适用于 show/hide 块中的 div 元素?
Angularjs 有很多选项可以取消在您的应用程序中使用 jQuery
; modeling
、directive
等选项...
在您的情况下,您不需要使用 id,因为当我们使用 ng-repeat
时,实际上所有项目都是唯一的,因此我们只需将它们用于 show/hide 或您可以使用的许多其他选项在 ng-repeat
.
中使用 object
我希望这个示例可以帮助您了解如何使用它:
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>
这是我的 HTML code.In 我正在从 ng-repeat 中获取多个值,对于每个值,我希望相应的按钮显示和隐藏两个 div elements.In 我的网页,来自不同成员块的按钮仅适用于 show/hide 第一个成员块...带有 id=round 的按钮应该切换 btw div id= first 和 id= 的元素其次是我通过 ng-repeat 获得的所有成员。
<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 以便每个按钮都适用于 show/hide 块中的 div 元素?
Angularjs 有很多选项可以取消在您的应用程序中使用 jQuery
; modeling
、directive
等选项...
在您的情况下,您不需要使用 id,因为当我们使用 ng-repeat
时,实际上所有项目都是唯一的,因此我们只需将它们用于 show/hide 或您可以使用的许多其他选项在 ng-repeat
.
object
我希望这个示例可以帮助您了解如何使用它:
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>