javascript - Angularjs - 如何在单击特定链接时显示特定 div 并使用 ng 重复选项卡隐藏以前的 div
问题描述
这里我有 3 个链接,当我单击一个链接时,特定的 div 正在显示,当我再次单击下一个 div 时,特定的 div 正在显示,但在这里我需要每次点击下一个链接时隐藏上一个 div。这里的链接和 div 来自 ng重复。例如 - 当我点击“Click-1”时,“name1”应该显示,当我再次点击“Click-2”时,只有“name2”应该显示,“name1”应该隐藏......等等。这是下面的代码
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="maindiv" ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in data"><span ng-click="showDetails($index,0)" class="id">Click-{{x.id}}</span> sssssssssssssss<span ng-show="div_[$index+'_0']" class="name">{{x.name}}</span></li>
</ul>
</div>
脚本
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.div_=[];
$scope.showDetails = function(index,row){
$scope.div_[index+'_'+row]= true;
}
$scope.data=
[{
"name": "name1",
"id": "1"
},
{
"name": "name2",
"id": "2"
},
{
"name": "name3",
"id": "3"
}
]
});
风格
ul li{
list-style-type:none;
cursor:pointer;
}
ul{
margin:0;
}
.maindiv{
position:relative;
}
.name{
position: absolute;
left: 97px;
background: #fff;
border: 1px solid;
width: 61px;
height: 23px;
}
解决方案
一种方法是将单击的项目传递给控制器并存储为活动项目。您也可以对链接中的内容使用相同的方法ng-class
来设置活动类
然后 ng-show
查看当前项目是否为存储的活动项目
var data = [{"name":"name1","id":"1"},{"name":"name2","id":"2"},{"name":"name3","id":"3"}];
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.data = data;
$scope.setActiveItem = function(item){
$scope.activeItem = item;
}
// show first on page load
$scope.activeItem = data[0];
});
li { padding:10px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="maindiv" ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in data" >
<span ng-click="setActiveItem(x)" class="id">Click-{{x.id}}</span>
</li>
</ul>
<div ng-repeat="x in data" ng-show="activeItem==x">{{x | json}}</div>
</div>
推荐阅读
- javascript - typescript get values of Promise.allSettled
- php - How to insert into mysql db two items with php
- javascript - Not sure what I'm doing wrong with this Jquery
- php - How to show ajax response data into Laravel php variable inside a foreach loop
- python-3.x - Sorting a stacked bar chart as a whole along Y-axis, based on the value of a particular category field using Altair
- java - Android Google Play games signin error 12501
- mapbox - Adding circle polygon to Map on click
- react-native - Handel screen from reactivelist to details screen
- java - Where are the definitions of the operators in Java language?
- c - 在C语言中检查数字是否为整数