gpt4 book ai didi

javascript - 展开/折叠多选标签 (optgroup)

转载 作者:太空宇宙 更新时间:2023-11-04 15:56:19 24 4
gpt4 key购买 nike

我在这里做了一个示例plnkr:Plnkr

我想知道是否可以使粗体标签可展开/可折叠?我问这个问题是因为我一直在试图弄清楚如何才能做到这一点,因为我只能看到粗体标签,并且在展开时我可以看到它们下面的内容。

下面是html代码、JS和CSS

HTML:

<!DOCTYPE html>
<html ng-app="test">

<head>
<script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">


<select multiple class="box">
<optgroup ng-repeat="(key,value) in data" label="{{value.label}}">
<option ng-repeat="id in value.ids">{{id}}</option>
</optgroup>
</select>

</body>

</html>

JavaScript:

// Code goes here

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

app.controller('MainCtrl',function ($scope) {

$scope.data = [{
label: "My Label", ids: [ "one id", "another id" ]
},{
label: "My Other Label", ids: [ "one id", "another id" ]
}];



});

CSS:

.box {
height: 120px;
}

最佳答案

查看此fiddle

代码:

<select multiple class="box">
<optgroup ng-click="value.expanded = !value.expanded" ng-repeat="(key,value) in data" label="{{value.label}}">
<option ng-click="$event.stopPropagation()" ng-if="value.expanded" ng-repeat="id in value.ids">{{id}}</option>
</optgroup>
</select>

$scope.data = [
{ label: "My Label", ids: [ "one id", "another id" ], expanded: true },
{ label: "My Other Label", ids: [ "one id", "another id" ], expanded: false }
];

更改:

  • 在每个子值中添加了 ng-if="value.expanded"(您也可以使用 ng-show)
  • 在标签级别添加了 ng-click="value.expanded = !value.expanded",以切换可见性。
  • 在 Controller 中为每个标签添加了默认值 (expanded: true)
  • 添加了 ng-click="$event.stopPropagation()" 以防止选择折叠子组(如果您在选择时需要自定义功能,则应将其移至函数中)

关于javascript - 展开/折叠多选标签 (optgroup),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42656684/

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