Question

Plunkr：https://plnkr.co/edit/FNN3lYtIKNhMgZT5F2Iy?p=preview

当点击每个按钮时，我想在模态中显示该按钮的名称，以及在我的js文件中与该按钮相关的年龄和其他信息，但我不能围绕它的逻辑包围

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <script src="script.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css">
  </head>

  <body>

<div ng-controller="projectCtrl">

<div ng-repeat="x in vegetables">
      <button type="button" class="btn two btn-default" ng-click="open()">{{x.name}}</button>


</div>

</div>
  </body>
</html>

使用Javascript：

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



// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

app.controller("projectCtrl", ["$rootScope", "$scope", "$filter", "$uibModal", function ($rootScope, $scope, $filter, $uibModal) {
    $scope.vegetables = [
    {name:'Carrot', dev: '1', age:25, gender:'boy'},
    {name:'Apple', age:30, gender:'girl'},
    {name:'Beef', dev: '1', age:28, gender:'girl'},
    {name:'Cow', age:15, gender:'girl'},
    {name:'Chicken', age:28, gender:'girl'},
    {name:'Pork', age:95, gender:'boy'},
    {name:'No ', age:50, gender:'boy'},
    {name:'Brocolibeef', age:27, gender:'girl'},
    {name:'BeefBeef', age:40, gender:'boy'},
    {name:'HorseBeef', age:60, gender:'girl'}
  ];

   $scope.open = function () {
        $uibModal.open({
            templateUrl: 'modal.html',
            controller: 'projectCtrl',
            windowClass: 'app-modal-window',
            scope: $scope
        })
        .result.then(function() {

        }, function() {

        });
    };


}]);

模态：

<div class="vegetable-name">
 Name: {{x.name}}
</div>
<div class="age">
 Age: {{x.age}}
</div>

Answer 1

您必须通过所选的onclick并使用resolve你可以将值发送到模态

<强> HTML

<div ng-repeat="x in vegetables">
      <button type="button" class="btn two btn-default" ng-click="open(x)">{{x.name}}</button>     

</div>

和 JS

// Code goes here

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



// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

app.controller("projectCtrl", ["$rootScope", "$scope", "$filter", "$uibModal", function ($rootScope, $scope, $filter, $uibModal) {
    $scope.vegetables = [
    {name:'Carrot', dev: '1', age:25, gender:'boy'},
    {name:'Apple', age:30, gender:'girl'},
    {name:'Beef', dev: '1', age:28, gender:'girl'},
    {name:'Cow', age:15, gender:'girl'},
    {name:'Chicken', age:28, gender:'girl'},
    {name:'Pork', age:95, gender:'boy'},
    {name:'No ', age:50, gender:'boy'},
    {name:'Brocolibeef', age:27, gender:'girl'},
    {name:'BeefBeef', age:40, gender:'boy'},
    {name:'HorseBeef', age:60, gender:'girl'}
  ];

   $scope.open = function (_details) {
     console.log(_details)
        $uibModal.open({
            templateUrl: 'modal.html',
            controller: 'PopupCtrl',
            windowClass: 'app-modal-window',
            scope: $scope,
            resolve : {
                     details : function() {
                        return  _details;
                    }
                }
        })
        .result.then(function() {

        }, function() {

        });
    };


}]);

app.controller("PopupCtrl", ["$rootScope", "$scope", "$filter", "$uibModal", 'details' , function ($rootScope, $scope, $filter, $uibModal , details) {
  $scope.vegetabledetails = details;
  console.log($scope.vegetabledetails)

}]);

for refrence https://plnkr.co/edit/GTqqnX9beo42FJs9Cr7W

获取唯一的模态信息

1 个答案: