Question

我有两个模态，每个模式都有不同的内容。我的第一个模态有一个按钮打开第二个模态。第二个模态具有键ID，它应该在选择时显示在第一个模态的按钮中。我只需使用标签就可以在第二个模态中显示值（使用此选项只是为了检查我的选择是否正常）。我无法在第一个模态的按钮中显示所选值。知道如何做到这一点吗？

这是我使用的代码，

在第一个模态的模板中，

<button class="btn btn-default btn-lg" ng-click="Modal()"  ng-model="cp.se"></button>

打开模态并链接到控制器的功能

$scope.Modal = function() {
            // function to open modal and link to Modal Controller
                var modalInstance = $modal.open({
                backdrop: 'static',
                templateUrl: '{% url 'critical_process' %}',
                controller: 'Controller',
            });


        modalInstance.result.then(function (msg) {
                $log.info('Modal success');
                //console.log(msg);
            });
        };
        // End:function to open modal and link to Modal Controller

在控制器中，

{{ngapp}}.controller(
        "Controller",
        function($scope, $http, $modalInstance){
        $scope.selected=[];
        $scope.items=[  { value:'Impact to Safety, regulatory compliance, or /n environment', key:10, color:'red'},
                        { value:'Reliability Impact',key:9, color:'brown'}];

});

在第二个模态的模板中，

<div class="well form-group" >
            <table class="table">

            <tr ng-repeat="item in items" ng-click="selected.item= item">
                    <td ng-style="{ 'background-color': item.color }">{{item.key}}</td>
                    <td> {{item.value}}                     </td>
             </tr>
            </table>
            <label>{{selected.item}}</label>
        {% endverbatim %}
</div>
       </div>

Answer 1

在第二模态的模板中

<div class="well form-group" >
    <table class="table">
        <!-- bind event handler on row click and pass the item to handler function -->
        <tr ng-repeat="item in items" ng-click="ok(item)">
            <td ng-style="{ 'background-color': item.color }">{{item.key}}</td>
            <td> {{item.value}}                     </td>
         </tr>
     </table>
     <label>{{selected}}</label>
     {% endverbatim %}
</div>

在第二模态的控制器中

{{ngapp}}.controller("Controller", function($scope, $http, $modalInstance){
     $scope.selected=[];
     $scope.items = [  
        { value:'Impact to Safety, regulatory compliance, or /n environment', key:10, color:'red'},
       { value:'Reliability Impact',key:9, color:'brown'}
     ];

     $scope.ok = function(item) {
          <!-- Pass the selected value to first modal -->
          <!-- Closing the modal resolves the promise -->
          $scope.selected = item;
          $modalInstance.close(item);
     }
});

并在你的第一个模态函数

    $scope.Modal = function() {
        // function to open modal and link to Modal Controller
            var modalInstance = $modal.open({
            backdrop: 'static',
            templateUrl: '{% url 'critical_process' %}',
            controller: 'Controller',
        });

        // On promise resolved passed callback function gets executed
        modalInstance.result.then(function (selectedItem) {
            // Assign selected item value to your modal
            cp.se = selectedItem.value;
        });
    };

HTML

<button class="btn btn-default btn-lg" ng-click="Modal()">{{cp.se}}</button>

通过链接两个模态在按钮中显示值

1 个答案: