- 首页
- 其他开发
- 如何从 AngularJS 控制器打开 UI-Bootstrap 模式并捕获选择
如何从 AngularJS 控制器打开 UI-Bootstrap 模式并捕获选择
[英] How to open a UI-Bootstrap modal from an AngularJS controller and capture selection
本文介绍了如何从 AngularJS 控制器打开 UI-Bootstrap 模式并捕获选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试从 AngularJS 控制器启动模态，然后从嵌套列表中捕获用户选择.这是我目前在 plnkr 中的尝试.
script.js
$scope.categoryList = [{名称:'第1类'}，{名称:'Catégorie 2',段: [{name: 'Segment 1',值: [{名称:'价值1'}，{名称:'Valeur 2'}]},{名称:'段2'}]},{名称:'类别 3',段: [{名称:'段1'，值: [{名称:'价值1'}，{名称:'价值2'}，{名称:'价值3'}，]},{名称:'段2'}]},{名称:'第4类'}，{ 名称:'第 5 类'}];var catList='';for ( var i=0; i < $scope.categoryList.length; i ++) {var category = $scope.categoryList[i];catList +=''+'<div class="dd-handle">'+category.name+'</div>';如果(类别.细分){catList +='';for( var j=0; j ';for(var k=0; k ' +'<div class="modal-body" style="背景:#f8fafb">' +'<div class="dd" id="nestable">' +'<ol class="dd-list">' +//添加列表 LI猫列表' </ol>
' +'<div class="modal-footer">
' +'</脚本>' +'<button class="safe btn btn-default btn-white btn-segmentation" ng-click="open()">{{ selected ?selected.name : 分割 }}</button>
';$('#showModal').append($scope.modalDisplay);
HTML
<div class="modal-body" style="背景:#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="segment.values 中的值">
{{ value.name }}
</ol></ol></ol>
<div class="modal-footer">
<button class="safe btn btn-default btn-white btn-segmentation" ng-click="open()">{{ selected ?selected.name : 'Segmentation' }}</button>
解决方案
也许这就是您想要做的事情?(请参阅 plnkr.)
<头><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><风格>.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:hover{背景色:#eee;}.popup .list .value.selected{红色;背景颜色:#ddd;}.popup .tools{填充:1rem;背景色:#eee;文本对齐:右；}</风格><body ng-app="demo" ng-controller="main"><h1>你好，Plunker！</h1><button ng-click="open()">选择段:{{ selected ?selected.name : "无"}}</button><script type="text/ng-template" id="popup.html"><div class='popup'><h1>请选择</h1><div ng-repeat="类别中的类别"><div class='category'>{{category.name}}</div><div ng-repeat="segment in category.segments"><div class='segment'>{{segment.name}}</div><div ng-repeat="segment.values 中的值"><div class='value' ng-class="{'selected': value.selected}" ng-click="setSelected(value);">{{value.name}}</div>
<button class='btn btn-primary' ng-click="ok()">OK</button><button class='btn btn-default' ng-click="cancel()">Cancel</button>
<脚本>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',控制器:'弹出'，尺寸:'lg'});modalInstance.result.then(function(selected){$scope.selected = 选中；})}});app.controller('popup', function($scope, $modalInstance){$scope.categories = [{名称:'类别1'}，{name: '类别 2',段: [{name: 'Segment 1',值: [{名称:'值1'}，{名称:'值2'}]},{名称:'段2'}]},{name: '类别 3',段: [{名称:'段1'}，{名称:'段2'}]},{名称:'第4类'}，{名称:'第5类'}];$scope.selected = null;$scope.setSelected = 函数(值){控制台目录(值)；for(var i in $scope.categories){var category = $scope.categories[i];for(var j in category.segments){var 段 = category.segments[j];for(var k in segment.values){segment.values[k].selected = false;}}}value.selected = true;$scope.selected = 值；}$scope.ok = function(){$modalInstance.close($scope.selected);}$scope.cancel = function(){$modalInstance.dismiss();}});</html>
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 控制器打开 UI-Bootstrap 模式并捕获选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
