angular.module('myApp', [])
.service('UserDataService', function ($q) {
// hardcoded for simplicity
var alec = {
id: 81,
firstName: 'Alec',
lastName: 'LaLonde',
active: true,
joinDate: new Date(1444166612822),
roles: [{
name: 'Administrator',
isAdmin: true
}, {
name: 'Owner'
}]
};
return {
get: function (id) {
return $q.when(alec);
},
save: function (user) {
return $q.when(user);
}
};
})
.service('UserModel', function () {
function UserModel(user) {
angular.extend(this, user);
this.isAdmin = this.calculateIsAdmin();
// this could be a filter also
this.fullName = user.firstName + " " + user.lastName;
}
angular.extend(UserModel.prototype, {
getPersistAttrs: function () {
return _.pick(this, ['id', 'firstName', 'lastName', 'active', 'joinDate']);
},
calculateIsAdmin: function () {
if (!this.roles) return false;
return _.some(this.roles, 'isAdmin');
}
});
return UserModel;
})
.controller('MyCtrl', function ($scope, $location, UserModel, UserDataService) {
UserDataService.get(81).then(function (user) {
$scope.userModel = new UserModel(user);
});
$scope.saveChanges = function (userModel) {
UserDataService.save(userModel.getPersistAttrs()).then(function (user) {
$location.path('user/' + user.id);
});
};
});
<div ng-controller="MyCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
{{ userModel.fullName }}
<span ng-if="userModel.isAdmin" class="small pull-right badge">Administrator</span>
</h3>
</div>
<div class="panel-body">
<form name="userForm" ng-submit="saveChanges(userModel)">
<div class="row">
<div class="col-xs-4">Active?</div>
<div class="col-xs-8">
<input type="checkbox" ng-model="userModel.active">
</div>
</div>
<div class="row">
<div class="col-xs-4">Joined on</div>
<div class="col-xs-8">{{ userModel.joinDate | date:'short' }}</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
body {
margin: 15px;
}
.form-group { margin: 10px 0; }
External resources loaded into this fiddle: