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 并使用 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)
}]);
关于javascript - 获取独特的模态信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38298268/