我尝试从AngularJS控制器启动模态，然后从嵌套列表中捕获用户选择。这是我目前在plnkr的尝试。
的script.js
$scope.categoryList = [
{ name: 'Catégorie 1' },
{
name: 'Catégorie 2',
segments: [
{
name: 'Segment 1',
values: [
{ name: 'Valeur 1' },
{ name: 'Valeur 2' }
]
},
{ name: 'Segment 2' }
]
},
{
name: 'Catégorie 3',
segments: [
{ name: 'Segment 1',
values: [
{ name: 'Valeur 1' },
{ name: 'Valeur 2' },
{ name: 'Valeur 3' },
]
},
{ name: 'Segment 2' }
]
},
{ name: 'Catégorie 4' },
{ name: 'Catégorie 5' }
];
var catList='';
for ( var i=0; i < $scope.categoryList.length; i ++) {
var category = $scope.categoryList[i];
catList +='<li class="dd-item" class="dd-item" data-id="1"> '+
'<div class="dd-handle">'+category.name+'</div> ';
if(category.segments){
catList +='<ol class="dd-list"> ';
for( var j=0; j < category.segments.length; j ++){
var segment = category.segments[j];
catList +='<li class="dd-item"> ' +
'<div class="dd-handle">'+segment.name+'</div> ' ;
if(segment.values){
catList =+ '<ol class="dd-list"> ' ;
for( var k=0; k < segment.values.length; k ++){
var value = segment.values[k];
catList +='<li class="dd-item"> ' +
'<div class="dd-handle" value="" ng-click="setSelectedSegment(value)">'+value.name+'</div>';
}
}
else {
catList +='</li></ol>';
}
}
}
else {
catList +='</li> ';
}
}
$scope.catList=catList ;
console.log( $scope.catList);
$scope.modalDisplay = ' <div ng-controller="modalCtrl" class="modalsegment" >' +
' <script type="text/ng-template" id="myModalContent.html" >' +
' <div class="modal-header">' +
' <button type="button" class="close" ng-click="close()">' +
'<span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
' <h5 class="popup-header">Sélection de la segmentation</h5> </div> ' +
'<div class="modal-body" style=" background: #f8fafb"> ' +
'<div class="dd" id="nestable"> ' +
'<ol class="dd-list"> ' +
// add list LI
catList
' </ol> </div> </div> ' +
'<div class="modal-footer"> </div> ' +
'</script> ' +
'<button class="safe btn btn-default btn-white btn-segmentation" ng-click="open()">{{ selected ? selected.name : Segmentation }}</button> </div>';
$('#showModal').append($scope.modalDisplay);
HTML
<div ng-controller="modalCtrl" class="modalsegment" >
<script type="text/ng-template" id="myModalContent.html" >
<div class="modal-header">
<button type="button" class="close" ng-click="close()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h5 class="popup-header">Sélection de la segmentation</h5>
<!-- <small class="font-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</small>-->
</div>
<div class="modal-body" style=" background: #f8fafb">
<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item" class="dd-item" data-id="1" ng-repeat="category in categoryList">
<div class="dd-handle">{{ category.name }}</div>
<ol class="dd-list" ng-if="category.segments">
<li class="dd-item" ng-repeat="segment in category.segments">
<div class="dd-handle">{{ segment.name }}</div>
<ol class="dd-list" ng-if="segment.values">
<li class="dd-item" ng-repeat="value in segment.values">
<div class="dd-handle" value="" ng-click="setSelectedSegment(value)">{{ value.name }}</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
</div>
<div class="modal-footer">
</div>
</script>
<button class="safe btn btn-default btn-white btn-segmentation" ng-click="open()">{{ selected ? selected.name : 'Segmentation' }}</button>
</div>
答案 0 :(得分：0)
也许这是你想要做的事情？ （见plnkr。）
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.4.0-rc.0" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<style>
.popup h1{
margin:0;
padding:1rem;
background-color:#eee;
}
.popup .list{
padding:1rem;
max-height:20rem;
overflow-y:auto;
}
.popup .list .category{
margin-left:1rem;
}
.popup .list .segment{
margin-left:3rem;
}
.popup .list .value{
padding-left:5rem;
cursor:pointer;
}
.popup .list .value:hover{
background-color:#eee;
}
.popup .list .value.selected{
color:red;
background-color:#ddd;
}
.popup .tools{
padding:1rem;
background-color:#eee;
text-align:right;
}
</style>
</head>
<body ng-app="demo" ng-controller="main">
<h1>Hello Plunker!</h1>
<button ng-click="open()">Select Segment: {{ selected ? selected.name : "None"}}</button>
<script type="text/ng-template" id="popup.html">
<div class='popup'>
<h1>Please make a selection</h1>
<div class='list'>
<div ng-repeat="category in categories">
<div class='category'>{{category.name}}</div>
<div ng-repeat="segment in category.segments">
<div class='segment'>{{segment.name}}</div>
<div ng-repeat="value in segment.values">
<div class='value' ng-class="{'selected': value.selected}" ng-click="setSelected(value);">{{value.name}}</div>
</div>
</div>
</div>
</div>
<div class='tools'>
<button class='btn btn-primary' ng-click="ok()">OK</button>
<button class='btn btn-default' ng-click="cancel()">Cancel</button>
</div>
</div>
</script>
<script>
var app = angular.module('demo', ['ui.bootstrap']);
app.controller('main', function($scope, $modal){
$scope.selected = null;
$scope.open = function(){
var modalInstance = $modal.open({
templateUrl: 'popup.html',
controller: 'popup',
size: 'lg'
});
modalInstance.result.then(function(selected){
$scope.selected = selected;
})
}
});
app.controller('popup', function($scope, $modalInstance){
$scope.categories = [
{ name: 'Category 1' },
{
name: 'Category 2',
segments: [
{
name: 'Segment 1',
values: [
{ name: 'Value 1' },
{ name: 'Value 2' }
]
},
{ name: 'Segment 2' }
]
},
{
name: 'Category 3',
segments: [
{ name: 'Segment 1' },
{ name: 'Segment 2' }
]
},
{ name: 'Category 4' },
{ name: 'Category 5' }
];
$scope.selected = null;
$scope.setSelected = function(value){
console.dir(value);
for(var i in $scope.categories){
var category = $scope.categories[i];
for(var j in category.segments){
var segment = category.segments[j];
for(var k in segment.values){
segment.values[k].selected = false;
}
}
}
value.selected = true;
$scope.selected = value;
}
$scope.ok = function(){
$modalInstance.close($scope.selected);
}
$scope.cancel = function(){
$modalInstance.dismiss();
}
});
</script>
</body>
</html>