本文介绍了如何从AngularJS控制器和捕捉选择打开一个界面，引导模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图从AngularJS控制器推出一个模式，然后从一个嵌套列表捕捉用户的选择。这里是我的电流尝试。
的script.js
$ scope.categoryList = [
{名称：'Catégorie1}，
{
名称：'Catégorie2'，
段：
{
名称：'段1'，
值：
{名称：'Valeur 1}，
{名称：'Valeur 2'}
]
}，
{名称：'段2'}
]
}，
{
名称：'Catégorie3'
段：
{名称：'段1'，
值：
{名称：'Valeur 1}，
{名称：'Valeur 2}，
{名称：'Valeur 3}，
]
}，
{名称：'段2'}
]
}，
{名称：'Catégorie4}，
{名称：'Catégorie5'}
]; VAR catList =''; 对于（VAR I = 0; I＆LT; $ scope.categoryList.length;我++）{
VAR类别= $ scope.categoryList [I]
catList + ='＆下;利类=DD-项类=DD-项数据ID =1＆GT; '+
'＆LT; DIV CLASS =DD-手柄＆GT;'+ category.name +'＆LT; / DIV＆GT; ';
如果（category.segments）{
catList + ='＆LT; OL类=DD-列表＆GT; ';
对于（VAR J = 0; J＆LT; category.segments.length; J ++）{
VAR段= category.segments [J]。
catList + ='＆LT;李班=DD-项目＆GT; '+
'＆LT; DIV CLASS =DD-手柄＆GT;'+ segment.name +'＆LT; / DIV＆GT; ';
如果（segment.values）{
catList = +'＆LT; OL类=DD-列表＆GT; ';
对于（VAR K = 0; K＆LT; segment.values.length; k ++）{
VAR值= segment.values [K];
catList + ='＆LT;李班=DD-项目＆GT; '+
'＆LT; DIV CLASS =DD-手柄VALUE =NG点击=setSelectedSegment（值）＆GT;'+ value.name +'＆LT; / DIV＆GT;';
}
}
其他{
catList + ='＆LT; /李＆GT;＆LT; / OL＆GT;';
} } }
其他{
catList + ='＆LT; /李＆GT; ';
}
} $ scope.catList = catList;
的console.log（$ scope.catList）;
$ scope.modalDisplay ='＆LT; DIV NG控制器=modalCtrl级=modalsegment＆GT;' +
'＆LT;脚本类型=文/ NG-模板ID =myModalContent.html＆GT;' +
'＆LT; DIV CLASS =模头＆GT;' +
'＆LT;按钮式=按钮级=关闭NG点击=关闭（）＆GT;' +
'＆LT;跨度ARIA隐藏=真＆GT;＆安培;倍;＆LT; / SPAN＆GT;＆LT;跨度类=SR-只有＆GT;关闭＆LT; / SPAN＆GT;＆LT; /按钮＆GT;' +
'＆LT; H5类=弹出窗口标题＆GT;选择德拉分割＆LT; / H5＆GT; ＆LT; / DIV＆GT; '+
'＆LT; DIV CLASS =模体的风格=背景：＃f8fafb＆GT; '+
'＆LT; DIV CLASS =DDID =嵌套＆GT; '+
'＆LT; OL类=DD-列表＆GT; '+
//添加列表LI
catList '＆LT; / OL＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; '+
'＆LT; DIV CLASS =模式躯＆GT; ＆LT; / DIV＆GT; '+
'＆LT; / SCRIPT＆GT; '+
'＆LT;按钮类=安全BTN BTN默认BTN-白色BTN分割NG点击=open（）的＆GT; {{选择？ selected.name：分段}}＆LT; /按钮＆GT; ＆LT; / DIV＆GT;';
$（'＃的ShowModal'）追加（$ scope.modalDisplay）。
HTML
＆LT; DIV NG控制器=modalCtrl级=modalsegment＆GT;
＆LT;脚本类型=文/ NG-模板ID =myModalContent.html＆GT;
＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭NG点击=关闭（）＆GT;＆LT;跨度ARIA隐藏=真＆GT;＆安培;倍;＆LT; / SPAN＆GT;＆LT;跨度类= SR-只有＆GT;关闭＆LT; / SPAN＆GT;＆LT; /按钮＆GT;
＆LT; H5类=弹出窗口标题＆GT;选择德拉分割＆LT; / H5＆GT;
＆LT;！ - ＆LT;小班=FONT-大胆＆GT; Lorem存有是印刷排版行业的简单虚拟文字＆lt; /小＆GT; - ＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模体的风格=背景：＃f8fafb＆GT;
＆LT; DIV CLASS =DDID =嵌套＆GT;
＆LT; OL类=DD-列表＆GT;
＆所述;利类=DD-项类=DD-项数据ID =1纳克重复=在所属分类类别＆GT; ＆LT; DIV CLASS =DD-手柄＆GT; {{category.name}}＆LT; / DIV＆GT; ＆LT; OL类=DD-列表NG-IF =category.segments＆GT;
＆LT;李班=DD-项目NG重复=段category.segments＆GT; ＆LT; DIV CLASS =DD-手柄＆GT; {{segment.name}}＆LT; / DIV＆GT; ＆LT; OL类=DD-列表NG-IF =segment.values＆GT;
＆LT;李班=DD-项目NG重复=，在segment.values价值＆GT;
＆LT; DIV CLASS =DD-手柄VALUE =NG点击=setSelectedSegment（值）＆GT; {{value.name}}＆LT; / DIV＆GT;
＆LT; /李＆GT;
＆LT; / OL＆GT;
＆LT; /李＆GT;
＆LT; / OL＆GT;
＆LT; /李＆GT;
＆LT; / OL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模式躯＆GT;
＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
＆LT;按钮类=安全BTN BTN默认BTN-白色BTN分割NG点击=open（）的＆GT; {{选择？ selected.name：'分割'}}＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
解决方案
也许这就是事情你希望做的那种？ （请参见。）
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT; ＆LT; HEAD＆GT;
＆LT;链路数据需要=引导，CSS @ *数据semver =3.3.1的rel =stylesheet属性HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min的.css/＆GT;
＆所述;脚本数据需要=angular.js@1.4.0-rc.0数据semver =1.4.0-rc.0SRC =HTTPS：//$c$c.angularjs.org/1.4的3.0 rc.0 / angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本数据需要=UI自举@ *数据semver =0.12.1SRC =http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1。 min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;风格＆GT;
.popup H1 {
保证金：0;
填充：1rem;
背景色：#eee;
}
.popup .LIST {
填充：1rem;
最大高度：20rem;
溢出-Y：汽车;
}
.popup .LIST .category {
保证金左：1rem;
}
.popup .LIST .SEGMENT {
保证金左：3rem;
}
.popup .LIST .value的{
填充左：5rem;
光标：指针;
}
.popup .LIST .value的：悬停{
背景色：#eee;
}
.popup .LIST .value.selected {
颜色：红色;
背景色：#ddd;
}
.popup .tools {
填充：1rem;
背景色：#eee;
文本对齐：权利;
}
＆LT; /风格＆GT;
＆LT; /头＆GT; ＆LT;机身NG-应用=演示NG-控制器=主＆GT;
＆LT; H1＆GT;您好Plunker＆LT;！/ H1＆GT;
{{选择：其中，段选择=开（）＆GT按钮纳克点击？ selected.name：无}}＆LT; /按钮＆GT; ＆LT;脚本类型=文/ NG-模板ID =popup.html＆GT;
＆LT; DIV CLASS ='弹出'＆GT;
＆LT; H1＆gt;请做出选择＆LT; / H1＆GT; ＆LT; DIV CLASS ='清单'＆GT;
＆LT; DIV NG重复=类别中的大类＆GT;
＆LT; DIV CLASS ='分类'＆GT; {{category.name}}＆LT; / DIV＆GT;
＆LT; DIV NG重复=段category.segments＆GT;
＆LT; DIV CLASS ='段'＆GT; {{segment.name}}＆LT; / DIV＆GT;
＆LT; DIV NG重复=，在segment.values价值＆GT;
＆LT; DIV CLASS ='值'=纳克级{'选择'：value.selected}NG点击=的setSelected（值）;＆GT; {{value.name}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS ='工具'＆GT;
＆LT;按钮类='BTN BTN-小学'NG点击=OK（）＆GT;确定＆LT; /按钮＆GT;
＆LT;按钮类='BTN BTN-默认的NG-点击=取消（）＆GT;取消＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT; ＆LT;脚本＆GT; VAR应用= angular.module（'示范'，['ui.bootstrap']）;
app.controller（'主'，函数（$范围，$模态）{
$ scope.selected = NULL;
$ scope.open =功能（）{
VAR modalInstance = $ modal.open（{
templateUrl：popup.html'，
控制器：'弹出'，
大小：LG
}）; modalInstance.result.then（功能（选择）{
$ scope.selected =选择;
}）
} }）; app.controller（'弹出'，函数（$范围，$ modalInstance）{
$ scope.categories = [
{名：1类}，
{
名称：'第2类'，
段：
{
名称：'段1'，
值：
{名称：'值1'}，
{名称：'值2'}
]
}，
{名称：'段2'}
]
}，
{
名称：'3类'，
段：
{名称：'段1'}，
{名称：'段2'}
]
}，
{名：4类}，
{名称：'5类'}
]; $ scope.selected = NULL;
$ scope.setSelected =功能（值）{
console.dir（值）;
对于（VAR我在$ scope.categories）{
VAR类别= $ scope.categories [I]
对（在category.segments变种j）条{
VAR段= category.segments [J]。
对（在segment.values变种K）{
segment.values [K] .selected = FALSE;
}
}
}
value.selected = TRUE;
$ scope.selected =价值;
}
$ scope.ok =功能（）{
$ modalInstance.close（$ scope.selected）;
}
$ scope.cancel =功能（）{
$ modalInstance.dismiss（）;
} }）; ＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
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>
解决方案
Perhaps this is the kind of thing you are looking to do? (see 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>
这篇关于如何从AngularJS控制器和捕捉选择打开一个界面，引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！