获取唯一的模态信息

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>

嗨，

您必须传递选定的 onclick 并使用解析，您可以将值发送到模态

.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)
}]);

对于参考 https://plnkr.co/edit/GTqqnX9beo42FJs9Cr7W

相关内容

最新更新

热门标签：