angularjs – 在ng-repeat中使用模态窗口

发布时间：2020-12-17 09:16:43 所属栏目：安全来源：网络整理

导读：我有一个ng-repeat,我试图添加一个模态,将相同的范围变量传递给模态窗口.我能够打开模态窗口但是ng-repeat的范围值没有显示在模态中.希望我的代码解释得更好.这是我到目前为止： div ng-controller="CustomerController" div ng-repeat="customer in custome

我有一个ng-repeat,我试图添加一个模态,将相同的范围变量传递给模态窗口.我能够打开模态窗口但是ng-repeat的范围值没有显示在模态中.希望我的代码解释得更好.这是我到目前为止：

<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-repeat的客户详细信息(例如{{customer.name}})不会传递到模态窗口.控制器出了什么问题？

我在这里查看Angular Bootrap UI示例后尝试创建它：http://angular-ui.github.io/bootstrap/

编辑：

这是一个jsfiddle样本：http://jsfiddle.net/Alien_time/8s9ss/3/

我还有 updated your fiddle及以下的代码.我希望这会有所帮助.

问候

var app = angular.module('app',['ui.bootstrap']);

app.controller('ModalInstanceCtrl',function ($scope,$modalInstance,customer)
{
$scope.customer = customer;

});

app.controller('CustomerController',$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;
                }
            }
             });

    };

});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!