shaaa shaaa - 23 days ago 5
AngularJS Question

get data from modal and display it in a parent controller table

I would like to know how we can pass the data from modal and display them in a main controller table. On click of generate button in modal am getting input text data and displaying it in the table. But table is not updated with the data. Here is my plunkr- https://plnkr.co/edit/yk4Zcl6LF79cw4msYUrw?p=preview

// Code goes here




var myTable = angular.module('myTable', ['ui.bootstrap']);


myTable.controller('tableCtrl', function($scope, $http, $uibModal) {


$scope.Catalogs = [];
$scope.phNumber = [];
$scope.schema=[{"value":"2.0"},{"value":"2.2"}];
$scope.revision=[{"value":"ARev"},{"value":"XRev"}];

$http({ method:'GET',
url: 'http://100.96.16.175:8080/CGSDataManager/webapi/component_type',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
$scope.components = data;

/*for(var i = 0; i< data.length; i++) {
$scope.components = data[i].description;
//alert(data[i].description + components);
}*/
}
);

// rest call to get System Models
$http({ method:'GET',
url: 'http://100.96.16.175:8080/CGSDataManager/webapi/platform_info',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
$scope.systems = data
for(var i = 0; i< data.length; i++) {
phNumber = data[i].platform_id;

}
}
);

$scope.change = function() {

$scope.opts = {
backdrop: true,
backdropClick: true,
templateUrl : 'modalView1.html',
controller : 'ModalInstanceCtrl',
resolve: {} // empty storage
};


$scope.opts.resolve.item = function() {
return angular.copy({schema:$scope.schema, revision:$scope.revision, components:$scope.components, systems:$scope.systems, phNumber:$scope.phNumber, Catalogs:$scope.Catalogs}); // pass name to Dialog
}

var modalInstance = $uibModal.open($scope.opts);

modalInstance.result.then(function(){
//on ok button press
},function(){
//on cancel button press
console.log("Modal Closed");
});
};

});
myTable.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, item) {


$scope.item = item;


$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};

$scope.submitData = function() {


$scope.item.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});



$uibModalInstance.dismiss('submit');
};



});


// modal code
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" data-ng-click="cancel()">&times;</button>
<h4 style="color: #0085C3;" ><b style="font-size:14px;">Filter</b></h4>
</div>
<div class="modal-body" name="modalData">

<div class="row">
<div class="col-md-12 ">
<form>
Catalog Name: <input type="text" data-ng-model="catalogName"/>
</form>
</div>
</div>

<div class="row" >
<div class="col-md-3 dell-bannercolor line">
<span style="font-size: 12px">Schema</span>

<table class="table table-striped">
<tbody>
<tr data-ng-repeat="sc in item.schema">
<td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="sc.selected" data-ng-true-value="'{{sc.value}}'" data-ng-false-value="''">&nbsp;&nbsp;<span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{sc.value}}</span></td>

</tr>


</tbody>

</table>

</div>

<div class="col-md-3 dell-bannercolor line">
<span style="font-size: 12px">Revision</span>

<table class="table table-striped">
<tbody>
<tr data-ng-repeat="re in item.revision">
<td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="re.selected" data-ng-true-value="'{{re.value}}'" data-ng-false-value="''">&nbsp;&nbsp;<span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{re.value}}</span></td>

</tr>


</tbody>

</table>

</div>


<div class="col-md-3 dell-bannercolor line">
<span style="font-size:12px">Component Type</span>

<div style="height:180px; overflow:auto;">
<table class = "table table-striped" >
<tbody>
<tr data-ng-repeat="x in item.components">
<td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="x.selected" data-ng-true-value="'{{x.description}}'" data-ng-false-value="''">&nbsp;&nbsp;<span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{x.description}}</span></td>
</tr>

</tbody>

</table>
</div>
</div>

<div class="col-lg-3 dell-bannercolor">
<span style="font-size:12px">System Model</span>
<br/>

<div style="height:150px; overflow:auto;">
<table class = "table table-striped" >
<tbody>
<tr data-ng-repeat = "y in item.systems">
<td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="y.selected" data-ng-true-value="'{{y.platform_id}}'" data-ng-false-value="''">&nbsp;&nbsp;<span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{y.model}}</span></td>
</tr>

</tbody>

</table>
</div>
</div>

</div>

</div>

<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" data-ng-click="cancel()">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="submitData()">Generate</button>
</div>


// html code
<!DOCTYPE html>
<html>

<head>
<script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="script.js"></script>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />

<style>
.dell-bannercolor {
color: #0085C3;
}

//
adding this code for vertical line -- start
.line {
position: relative;
}

.line:after {
content: '';
position: absolute;
right: 0;
border-right: 1px solid #cfc7c0;
top: 10%;
bottom: 10%;
}
//
end
</style>
</head>

<body ng-app="myTable" ng-controller="tableCtrl">
<div class="containter">
<div class="jumbotron">
<h1>JSON to Table</h1>
</div>
<div >
<div id="table1Div" style="background:white;position absolute;">
<table class="table table-hover table-bordered" id="peopleTable">
<tbody>
<tr>
<th>Catalog Name</th>
<th>Validation</th>
<th>publishing</th>

</tr>

<tr data-ng-repeat="catalog in Catalogs">
<td>{{catalog.name}}</td>
<td>{{catalog.validation}}</td>
<td>{{catalog.publishing}}</td>
</tr>
</tbody>
</table>

<a href="#"><button type="button" class="btn btn-primary" ng-click="change()">Clone</button></a>
</div>

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

</html>

Answer

See this https://plnkr.co/edit/hxdkNBvccYDie1tiigZy?p=preview

you Need to pass it while closing modal and get in controller

  $uibModalInstance.dismiss($scope.item.Catalogs);