在 ng-repeat 中使用模态窗口
[英] Using Modal Window inside ng-repeat
本文介绍了在 ng-repeat 中使用模态窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个 ng-repeat
并且我正在尝试添加一个将相同范围变量传递给模态窗口的模态.我能够打开模态窗口,但 ng-repeat 的范围值没有显示在模态内.希望我的代码解释得更好.这是我目前所拥有的:
<div ng-repeat="客户中的客户"><button class="btn btn-default" ng-click="open()">{{ customer.name }}</button><!--模态窗口--><script type="text/ng-template" id="myModalContent.html"><div class="modal-header"><h3>客户名称是:{{ customer.name }}</h3>
<div class="modal-body">这是客户详细信息的所在<br/>{{ 顾客信息 }}
<div class="modal-footer">
控制器:
app.controller('CustomerController', function($scope, $timeout, $modal, $log, customerServices) {$scope.customers= customerServices.getCustomers();//模态窗口$scope.open = 函数 () {var modalInstance = $modal.open({templateUrl: 'myModalContent.html',});};});
以上打开模态窗口.但是,来自 ng-repeat 的客户详细信息(例如 {{ customer.name }})不会传递到模态窗口中.控制器有问题吗?
在查看此处的 Angular Bootrap UI 示例后,我正在尝试创建它:http://angular-ui.github.io/bootstrap/
这是一个 jsfiddle 示例: http://jsfiddle.net/Alien_time/8s9ss/3/
解决方案
我已经更新了你的小提琴以及下面的代码.我希望这会有所帮助.
问候
var app = angular.module('app', ['ui.bootstrap']);app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, customer){$scope.customer = 客户;});app.controller('CustomerController', function($scope, $timeout, $modal, $log) {$scope.customers = [{name: '瑞奇',细节:瑞奇的一些细节",},{name: '迪基',详细信息:一些 Dicky 详细信息",},{姓名:'尼基',详细信息:一些尼基细节",}];//模态窗口$scope.open = 函数(_customer){var modalInstance = $modal.open({控制器:ModalInstanceCtrl",templateUrl: 'myModalContent.html',解决: {客户:函数(){返回_客户;}}});};});
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>
The controller:
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',
});
};
});
The above opens the modal window. However, the customer details such as {{ customer.name }} from the ng-repeat is not passed into the modal window. Have I got something wrong with the Controller?
I am trying to create this after looking at the Angular Bootrap UI example here: http://angular-ui.github.io/bootstrap/
EDIT:
Here is a jsfiddle sample: http://jsfiddle.net/Alien_time/8s9ss/3/
解决方案
I've updated your fiddle and below code as well. I hope that will help.
Regards
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-repeat 中使用模态窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!