Hello Folks,
Below is my HTML code snippet.
<style>
.selected {
background-color: lightgreen;
}
</style>
<script type="text/javascript" src="angular132.js"></script>
<script>
var app = angular.module('ActorApp', []);
var Controller1 = app.controller('Controller1',
function($scope, $http) {
$scope.actorList = [];
$scope.fetchAllActors = function() {
$http.get('http://localhost:8080/MysqlRestDB/webresources/entities.actor',
{responseType: 'json'}).
success(function(data, status, headers, config)
{
$scope.actorList = data;
}).
error(function(data, status, headers, config) {
});
};
$scope.selectRow = function(row,actor) {
$scope.selectedRow = row;
actor.isRowDisabled = true;
actor.hideButton = true;
};
$scope.updateActor = function(actor) {
actor.lastUpdate = new Date();
var putData = {"actorId":actor.actorId,"firstName":
actor.firstName, "lastName": actor.lastName, "lastUpdate":
actor.lastUpdate};
$http.put('http://localhost:8080/MysqlRestDB/webresources/entities.actor'+'/'+actor.actorId,
putData, {responseType: 'json'}).
success(function(data, status, headers, config)
{
//$scope.actorList = data;
console.log("Update actor response " +
data + " status " + status);
actor.isRowDisabled = false;
actor.hideButton = false;
$scope.selectedRow = null;
}).
error(function(data, status, headers, config) {
});
};
});
<div ng-controller='Controller1'>
<button ng-click="fetchAllActors()">Check Test</button>
<table ng-show="actorList.length" border='2'>
<tbody>
<tr>
<th>Actor Id </th>
<th>First Name </th>
<th>Last Name </th>
<th>Last Update Date </th>
<th>Click To Edit </th>
</tr>
<tr ng-repeat="actor in actorList" ng-class='{selected:
$index===selectedRow}'>
<td><input ng-model='actor.actorId'
ng-disabled='true'/></td>
<td><input ng-model='actor.firstName'
ng-disabled='!actor.isRowDisabled'/></td>
<td><input ng-model='actor.lastName'
ng-disabled='!actor.isRowDisabled'/></td>
<td><input ng-model='actor.lastUpdate'
ng-disabled='true'/></td>
<td>
<button ng-click='selectRow($index,actor)'
ng-hide='actor.hideButton'>Edit</button>
<button ng-click='updateActor(actor)'
ng-hide='!actor.hideButton'>Save</button>
</td>
</tr>
</tbody>
</table>
</div>
If you see here i am trying to iterate a list here with ng-repeat. For
visibility ofcourse i had to so many logic coupled with the HTML elements.
It does not look like controller and html are separate and they do combine
with each other which we can not separate. Am i missing something? Am i not
following AngularJS standards? Is there any better way to achieve what i am
doing here?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
