Snorlax Snorlax - 4 months ago 30
CSS Question

Getting Unique Modal information

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

When clicking on each button, I want to display the name of that button in the modal as well as the age and other information associated with that button in my js file but I can't wrap my head around the logic for it.

<!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() {

});
};


}]);


Modal:

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

Answer

Hi u have to pass the selected onclick and the using resolve u can send values to the modal

HTML

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

</div>

and 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

Comments