使用模态窗口NG-重复内 [英] Using Modal Window inside ng-repeat
问题描述
我有一个 NG-重复
,我想补充一点,通过同一范围变量模态窗口模式。我能够得到的模态窗口中打开,但来自NG-重复的范围值未模态内显示。希望我的code解释更好。这是我到目前为止有:
I have a ng-repeat
and I am trying to add a modal that passes the same scope variable to the modal window. I am able to get the modal window to open but the scope value from ng-repeat is not showing inside the modal. Hopefully my code explains better. This is what I have so far:
<div ng-controller="CustomerController">
<div ng-repeat="customer in customers">
<button class="btn btn-default" ng-click="open()">{{ customer.name }}</button>
<!--MODAL WINDOW-->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>The Customer Name is: {{ customer.name }}</h3>
</div>
<div class="modal-body">
This is where the Customer Details Goes<br />
{{ customer.details }}
</div>
<div class="modal-footer">
</div>
</script>
</div>
</div>
控制器:
app.controller('CustomerController', function($scope, $timeout, $modal, $log, customerServices) {
$scope.customers= customerServices.getCustomers();
// MODAL WINDOW
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
});
};
});
上面打开的模式窗口。不过,从NG重复客户的详细信息,如{{customer.name}}不会传递到模式窗口。有我有什么毛病控制器?
我想在角Bootrap UI的例子在这里寻找后创建这个:的http://角-ui.github.io/bootstrap/
I am trying to create this after looking at the Angular Bootrap UI example here: http://angular-ui.github.io/bootstrap/
编辑:
这里是一个样本的jsfiddle: http://jsfiddle.net/ Alien_time / 8s9ss / 3 /
推荐答案
我已经更新您的提琴以下code为好。我希望这将有助于。
I've updated your fiddle and below code as well. I hope that will help.
问候
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, customer)
{
$scope.customer = customer;
});
app.controller('CustomerController', function($scope, $timeout, $modal, $log) {
$scope.customers = [
{
name: 'Ricky',
details: 'Some Details for Ricky',
},
{
name: 'Dicky',
details: 'Some Dicky Details',
},
{
name: 'Nicky',
details: 'Some Nicky Details',
}
];
// MODAL WINDOW
$scope.open = function (_customer) {
var modalInstance = $modal.open({
controller: "ModalInstanceCtrl",
templateUrl: 'myModalContent.html',
resolve: {
customer: function()
{
return _customer;
}
}
});
};
});
这篇关于使用模态窗口NG-重复内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!