展開/收起多選擇標籤（OPTGROUP）

我做出了榜樣plnkr這裏：Plnkr 展開/收起多選擇標籤（OPTGROUP）

我想知道是否有可能作出大膽的標籤展開/摺疊的？我問，因爲我一直在想如何做到這一點，我只看到大膽的標籤，並擴大我看到他們的內容。

下面是HTML代碼，JS和CSS

HTML：

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

<head> 
    <script data-require="[email protected]" 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; 
}

來源

2017-03-07 Dr Mints

看到這個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"上標籤水平，切換可見。
每個標籤添加默認值，在控制器（expanded: true）
新增ng-click="$event.stopPropagation()"防止選擇分組崩潰（如果您需要選擇自定義功能，你應該將這個移動到功能）

來源

2017-03-07 20:34:58

你真棒！我不是爲什麼我沒有想到這一點 –

我會包括ng-class =「{'glyphicon glyphicon-chevron-right'：value.expanded，'glyphicon glyphicon-chevron-down'：！value.expanded 「在optgroup裏面？ –

好吧，這不是問題的一部分，但你可以使用新的變量來添加CSS或任何你想要的 –

展開/收起多選擇標籤（OPTGROUP）

回答

相關問題