I'm trying to launch a modal from an AngularJS controller and then capture the users selection from a nested list. Here is my current attempt in 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>