AngularJS databinding
- by user3652865
How can I add multiple values to one object in an Array.
I am having Environment and Cluster, I am able to assign multiple clusters to one environment. Now I want to add application name to this environment and cluster pair. I am having page called "Add Application". Here I am using select menu to for environment and Cluster. My first question is, when I select environment then want to show only those clusters which are assigned to that environment name. And assign application name to that pair. Also should be able to edit the Application field. I am using environmentServices and clusterServices to store updated data.
link of JSFiddle: http://jsfiddle.net/avinashMaddy/J2KLK/5/
Please if someone can help me in this.
Below is my code:
<div class="maincontent" ng-controller="manageApplicationController">
<div class="article">
<form>
<section>
<!-- Environment -->
<div class="col-md-4">
<label>Environment:</label>
<select ng-model="newApp.selectedEnvironment" class="form-control"
ng-options="environment.name for environment in environments">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
<span>
<select ng-switch-when="true" disabled ng-model="newApp.selectedEnvironment" class="form-control"
ng-options="environment.name for environment in environments">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
</span>
</div>
<!-- Cluster -->
<div class="col-md-4">
<label>Cluster:</label>
<span ng-switch on="newApp.showCancel">
<select ng-switch-default ng-model="newApp.selectedCluster" class="form-control"
ng-options="cluster for cluster in clusters">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
<select ng-switch-when="true" disabled ng-model="newApp.selectedCluster" class="form-control"
ng-options="cluster for cluster in clusters">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
</span>
</div>
<!-- Application Name -->
<div class="col-md-4">
<label>Application Name:</label>
<input type="text" class="form-control" name="applicationName" placeholder="Application" ng-model="app.name" required>
<br/>
<input type="hidden" ng-model="app.id" />
</div>
</section>
<!-- submit button -->
<section class="col-md-12">
<button type="button" class="btn btn-default pull-right" ng-click="saveNewApplicatons()">Save</button>
</section>
</form>
</div>
<!-- table -->
<div class="article">
<table class="table table-bordered table-striped">
<tr>
<th colspan="6">
<div class="pull-left">Cluster Info</div>
</th>
</tr>
<tr>
<th>Environment</th>
<th>Cluster</th>
<th>Application</th>
<th>Edit</th>
<th>Header Ifo</th>
</tr>
<tr ng-repeat="app in applications">
<td>{{app.environment}}</td>
<td>{{app.cluster}}</td>
<td>{{app.name}}</td>
<td>
<a href="" ng-click="edit(app.id)" title="Edit">edit</span></a> |
<a href="" ng-click="remove(app.id)" title="Delete">delete</a>
</td>
<td>
<!-- Add template -->
<script type="text/ng-template" id="addHederInfo.html">
<div class="modal-header">
<h3>Add Header Info</h3>
</div>
<div class="modal-body">
<input type="text" class="form-control" name="eName" placeholder="Header Key" ng-model="$parent.header.key">
<br/>
<input type="text" class="form-control" name="eName" placeholder="Header Value" ng-model="$parent.header.value">
<br />
<input type="hidden" ng-model="header.id" />
<section>
<div class="pull-right">
<button class="btn btn-primary" ng-click="saveHeader()">Add</button>
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
</section>
</div>
<div class="modal-footer">
<h3>Existing Header Info for </h3>
<table class="table table-bordered table-striped">
<tr>
<th>Header Key</th>
<th>Header Vlaue</th>
</tr>
<tr ng-repeat="header in headers">
<td>{{header.key}}</td>
<td>{{header.value}}</td>
</tr>
</table>
</div>
</script>
<!-- /Add template -->
<script type="text/ng-template" id="editHederInfo.html">
<div class="modal-header">
<h3>Edit Header Info</h3>
</div>
<div class="modal-body">
<input type="text" class="form-control" name="eName" placeholder="Header Key" ng-model="$parent.header.key">
<br/>
<input type="text" class="form-control" name="eName" placeholder="Header Value" ng-model="$parent.header.value">
<br />
<input type="hidden" ng-model="header.id" />
<section>
<div class="pull-right">
<button class="btn btn-primary" ng-click="saveHeader()">Update</button>
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
</section>
</div>
<div class="modal-footer">
<h3>Existing Header Info for</h3>
<table class="table table-bordered table-striped">
<tr>
<th>Header Key</th>
<th>Header Vlaue</th>
<th>Edit</th>
</tr>
<tr ng-repeat="header in headers">
<td>{{header.key}}</td>
<td>{{header.value}}</td>
<td>
<a href="" ng-click="editHeader(header.id)" title="Edit"><span class="glyphicon glyphicon-edit" ></span></a> |
<a href="" ng-click="removeHeader(header.id)" title="Edit"><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr>
</table>
</div>
</script>
<!-- Add template -->
<!-- /Add template -->
<a href="" ng-click="addInfo()">Add</a> |
<a href="" ng-click="editInfo()">Edit</a>
</td>
</tr>
</table>
</div>
</div>
Controller.js:
var apsApp = angular.module('apsApp', []);
apsApp.service('clusterService', function(){
var clusters=[];
//simply returns the environment list
this.list = function () {
return clusters;
};
});
apsApp.service('environmentService', function(){
var environments=[
{name :'DEV',},
{name:'PROD',},
{name:'QA',},
{name:'Linux_Dev',}
];
//simply returns the environment list
this.list = function () {
return environments;
};
apsApp.controller('manageApplicationController', function ($scope, environmentService, clusterService) {
var uid = 0;
$scope.environments= environmentService.list();
$scope.clusters= clusterService.list();
$scope.newApp = {};
$scope.newApp.selectedEnvironment = $scope.environments[0];
$scope.newApp.selectedCluster = $scope.clusters[0];
$scope.newApp.buttonLabel = 'Save';
$scope.newApp.showCancel = false;
/*$scope.applications=[
{'name': 'Enterprice App Store' },
{'name': 'UsageGateway'},
{'name': 'Click 2 Fill'},
{'name': 'ATT SmartWiFi'}
];*/
//add new application
$scope.saveNewApplicatons = function() {
if ($scope.select.id == undefined) {
//if this is new application, add it in applications array
$scope.clusters.push({
id: uid++,
cluster: $scope.newApp.cluster,
environment: $scope.newApp.selectedEnvironment
});
} else {
$scope.clusters[$scope.select.id].cluster = $scope.select.cluster;
$scope.newApp.id = undefined;
$scope.newApp.buttonLabel = 'Save Cluster';
$scope.newApp.showCancel = false;
};
//clear the add appplicaitons form
$scope.newApp.selectedEnvironment = $scope.environments[0];
};
//delete application
$scope.remove = function (id) {
//search app with given id and delete it
for (i in $scope.clusters) {
if ($scope.clusters[i].id == id) {
confirm("This Cluster will get deleted permanently");
$scope.clusters.splice(i, 1);
$scope.clust = {};
}
}
};
$scope.cancelUpdate = function () {
$scope.newApp.buttonLabel = 'Save Cluster';
$scope.newApp.showCancel = false;
$scope.newApp.id = undefined;
$scope.newApp.cluster = "";
$scope.newApp.selectedEnvironment = $scope.environments[0];
};
});
