AngularJS update table data - angularjs

Question

I have to create a simple CRUD page with AngularJS.
I am able to add data with save button. Now when clicked on edit link form should get filled with the values with the row value. I am using angular's '.copy' object to get data into form.
For now text box getting valuse successfully but the select box not updating. And also want to make the select menu disable once clicked on edit link.
Below is the code:
apsApp.controller('clusterController', function ($scope ) {
var uid = 1;
$scope.clusters=[
{id:0, 'cluster':''},
];
$scope.environments = [
{name: 'DEV'},
{name: 'PROD'},
{name: 'QA'},
{name: 'Linux_Dev'}
];
$scope.selectedEnvironment = $scope.environments[0];
//add new cluster
$scope.saveNewClust = function() {
if($scope.clust.id == null) {
//if this is new cluster, add it in clusters array
$scope.clust.id = uid++;
$scope.clust.environment = $scope.selectedEnvironment.name;
console.log($scope.clust);
$scope.clusters.push($scope.clust);
}
else {
//for existing cluster, find this cluster using id and update it.
for(i in $scope.clusters) {
if($scope.clusters[i].id == $scope.clust.id) {
$scope.clusters[i] = $scope.clust;
}
}
};
//clear the add clusters form
$scope.clust = {};
};
//delete cluster
$scope.remove = function(id) {
//search cluster 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.edit = function(id) {
//search cluster with given id and update it
for(i in $scope.clusters) {
if($scope.clusters[i].id == id) {
//we use angular.copy() method to create copy of original object
$scope.clust = angular.copy($scope.clusters[i]);
}
}
};
});
HTML Template is:
<div class="menuContent">
<div class="maincontent">
<div class="article">
<form>
<section>
<!-- Environment -->
<div class="col-md-6">
<label>Environment:</label>
<select ng-model="selectedEnvironment" class="form-control" ng-options="environment.name for environment in environments">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
</div>
<!-- cluster Name -->
<div class="col-md-6">
<label>Cluster Name:</label>
<input type="text" class="form-control" name="clusterName" placeholder="Cluster" ng-model="clust.cluster" required>
<br/>
<input type="hidden" ng-model="clust.id" />
</div>
</section>
<!-- submit button -->
<section class="col-md-12">
<button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">Save Cluster</button>
</section>
</form>
</div>
<!-- table -->
<div class="article">
<table class="table table-bordered table-striped">
<tr>
<th colspan="4">
<div class="pull-left">Cluster Info</div>
</th>
</tr>
<tr>
<th>#</th>
<th>Environment</th>
<th>Cluster</th>
<th>Edit</th>
</tr>
<tr ng-repeat="clust in clusters">
<td>{{}}</td>
<td>{{clust.environment}}</td>
<td>{{clust.cluster}}</td>
<td>
<span class="glyphicon glyphicon-edit" ></span> |
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</table>
</div>
</div>
</div>

Answer 1

I went over your code and changed a lot. Here is the new javascript part:
var app = angular.module('myApp', []);
app.controller('clusterController', function ($scope) {
var uid = 0;
$scope.clusters = [];
$scope.environments = [
{name: 'DEV'},
{name: 'PROD'},
{name: 'QA'},
{name: 'Linux_Dev'}
];
$scope.select = {};
$scope.select.selectedEnvironment = $scope.environments[0];
$scope.select.buttonLabel = 'Save Cluster';
$scope.select.showCancel = false;
//add new cluster
$scope.saveNewClust = function () {
if ($scope.select.id == undefined) {
//if this is new cluster, add it in clusters array
$scope.clusters.push({
id: uid++,
cluster: $scope.select.cluster,
environment: $scope.select.selectedEnvironment
});
} else {
//for existing cluster, find this cluster using id and update it.
$scope.clusters[$scope.select.id].cluster = $scope.select.cluster;
$scope.select.id = undefined;
$scope.select.buttonLabel = 'Save Cluster';
$scope.select.showCancel = false;
};
//clear the add clusters form
$scope.select.cluster = "";
$scope.select.selectedEnvironment = $scope.environments[0];
};
//delete cluster
$scope.remove = function (id) {
//search cluster 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.select.buttonLabel = 'Save Cluster';
$scope.select.showCancel = false;
$scope.select.id = undefined;
$scope.select.cluster = "";
$scope.select.selectedEnvironment = $scope.environments[0];
};
});
First of all, set the var uid to 0. Don't start from 1, because the array, which you want to check starts also indexing from 0. Secondly, I added an object which persists the data for the form, where the user chooses the environment and types the name for the cluster. The object is assigned to $scope.select. There we save the preselect environment for the select box. I also save the name "Save Cancel" here, because I made it so after editing one cluster, the label of the button changes from "Save Cluster" to "Update Cluster". Like this your users will know, when exactly they edit a cluster or when they add a cluster. Furthermore, while editing a cluster, another button Cancel Update appears, so the user can also stop editing a cluster. If this button should show or not is saved in $scope.select.showCancel.
The saveNewClust function handles both routines, one for saving and one for updating. The function for editing is therefore removed. I added another function cancelUpdate, which is called in case the user cancels the action.
This is the HTML part. I just updated the form to use the new select object and the ng-click routine when the user clicks on edit. The select box is now surrounded with ng-switch. If the user edits an existing cluster, the select box is disabled.
<div ng-controller="clusterController" class="menuContent">
<div class="maincontent">
<div class="article">
<form>
<section>
<!-- Environment -->
<div class="col-md-6">
<label>Environment:</label>
<span ng-switch on="select.showCancel">
<select ng-switch-when="true" disabled ng-model="select.selectedEnvironment" class="form-control"
ng-options="environment.name for environment in environments">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
<select ng-switch-default ng-model="select.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 Name -->
<div class="col-md-6">
<label>Cluster Name:</label>
<input type="text" class="form-control" name="clusterName" placeholder="Cluster"
ng-model="select.cluster" required>
<br/>
<input type="hidden" ng-model="clust.id"/>
</div>
</section>
<!-- submit button -->
<section class="col-md-12">
<button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">{{select.buttonLabel}}
</button>
<button ng-show="select.showCancel" type="button" class="btn btn-default pull-right" ng-click="cancelUpdate()">Cancel update
</button>
</section>
</form>
</div>
<!-- table -->
<div class="article">
<table class="table table-bordered table-striped">
<tr>
<th colspan="4">
<div class="pull-left">Cluster Info</div>
</th>
</tr>
<tr>
<th>#</th>
<th>Environment</th>
<th>Cluster</th>
<th>Edit</th>
</tr>
<tr ng-repeat="clust in clusters">
<td>{{}}</td>
<td>{{clust.environment.name}}</td>
<td>{{clust.cluster}}</td>
<td>
<span class="glyphicon glyphicon-edit"></span>Edit
|
<a href="" ng-click="remove(clust.id)" title="Delete"><span
class="glyphicon glyphicon-trash"></span>Delete</a>
</td>
</tr>
</table>
</div>
</div>
</div>
Here is the jsfiddle for testing: http://jsfiddle.net/hv7Pb/