gpt4 book ai didi

javascript - 动态内容angular js的动态显示隐藏代码

转载 作者:行者123 更新时间:2023-11-30 12:07:44 24 4
gpt4 key购买 nike

按原样运行下面的代码,代码工作正常,但我想要相同的功能而不污染 angularjs 代码。

<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="newapp" ng-controller="newctrl">
<div ng-repeat="x in names">
<div data-ng-click="toggleCompanyArr(['nav_' + x.id])"><a href="">This is id : {{x.id}}</a></div>
<div id="nav_{{x.id}}" style="display:none">{{x.firstname}} {{x.lastname}}</div><br><Br><Br>
</div>
</body>

<script>
var app = angular.module('newapp',[]);
app.controller('newctrl', function($scope){
$scope.names=[
{"id":"1","firstname":"Akhilesh","lastname":"Kumar"},
{"id":"2","firstname":"Aman","lastname":"Kumar"},
{"id":"3","firstname":"Mithilesh","lastname":"Kumar"}
];
$scope.toggleCompanyArr = function(val){
$("#"+val).toggle();
};
});
</script>
</html>

最佳答案

您不需要使用 jQuery 来显示/隐藏 div,您可以在这里简单地使用 ng-show

为了实现这一点,您需要在 names 集合的每个元素上添加 show 标志(您不需要添加新的 show属性添加到您的集合中,如果您不在每个名称元素中添加 show: false 属性,angular 将处理此问题),并在单击时切换 show 标志元素。此后在 ng-show 指令中使用 x.show 标志来显示和隐藏 div。

基本上在初始加载时 x.showundefinedfalse 所以无论如何它将在加载时隐藏所有元素内容。当您单击元素时,ng-click 指令将标记为 x.show = true 并且该元素将被显示。

这种方法背后的另一个优点是,您可以在其对象中拥有每个元素的状态。

假设您选择了 akhilesh 选项,那么它将有 {"id":"1","firstname":"Akhilesh","lastname":"Kumar", 显示: true}, & other 将显示 show: false 如果这些元素没有被点击。

标记

<div  data-ng-click="x.show = !x.show">
<a href="">This is id : {{x.id}}</a>
</div>
<div ng-show="x.show">
{{x.firstname}} {{x.lastname}}
</div>

Reference link

关于javascript - 动态内容angular js的动态显示隐藏代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34707281/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com