Please be sure that you use the latest JayData, 1.3.4 or newer !
In the first blogpost about our new AngularJS module we created a simple master-detail list using remote Northwind database with oData. Let’s enhance it further so it becomes a fully featured product editor which can be used to edit existing products, to delete products and to add new products to our database.
Edit products
Two-way binding is not unique to AngularJS, other frameworks like KnockoutJS, KendoUI, JsViews also give you this feature, but still it’s quite handy. With a few lines of javascript and a little additional markup you’re ready to edit the various properties of the selected product and your changes in the form are written back to the backing model.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul> <li ng-repeat="product in categoryProducts"> <a href="#" ng-click="$parent.selectedProduct = product">{{product.Product_Name}}</a> </li> </ul> <form ng-if="selectedProduct"> <fieldset> <legend>{{selectedProduct.Product_Name}}</legend> <label><span>ID:</span><span>{{selectedProduct.Product_ID}}</span></label> <label><span>Product name</span><input ng-model="selectedProduct.Product_Name" /></label> <label><span>English name</span><input ng-model="selectedProduct.English_Name" /></label> <label><span>Unit Price</span><input ng-model="selectedProduct.Unit_Price" /></label> <label><span>Quantity Per Unit</span><input ng-model="selectedProduct.Quantity_Per_Unit" /></label> <label><span>Units in stock</span><input type="number" ng-model="selectedProduct.Units_In_Stock" /></label> <label><span>Discontinued</span><input type="checkbox" ng-model="selectedProduct.Discontinued" /></label> <button ng-click="save()">Save</button> </fieldset> </form> |
For the actual save we use JayData with JSQL:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var app = angular.module('app', ['jaydata']); function ProductEditorController($scope, $data) { $scope.categories = []; $scope.categoryProducts = []; $scope.selectedCategory = null; $scope.selectedProduct = null; … $scope.save = function () { if ($scope.selectedProduct.Product_ID) { $scope.northwind.Products.attach($scope.selectedProduct, true); $scope.selectedProduct.entityState = $data.EntityState.Modified; } else { $scope.northwind.Products.add($scope.selectedProduct); } $scope.saveChanges(); }; $scope.saveChanges = function () { $scope.northwind.saveChanges() .then(function () { $scope.selectedProduct = null; },function() { $scope.northwind.stateManager.reset(); }); }; } |
Remove a product
It really is a no-brainer. Let’s add a button alongside the save button:
|
1 |
<button ng-click="remove()">Remove</button> |
And add a simple method to the scope:
|
1 2 3 4 |
$scope.remove = function () { $scope.northwind.Products.remove($scope.selectedProduct); $scope.saveChanges(); }; |
Add a new product
“Everything should be as simple as possible, but not simpler” 
Add a button to the Product list:
|
1 |
<button ng-if="selectedCategory" ng-click="newProduct()">add new</button> |
And finally the function to create the necessary backing object:
|
1 2 3 4 5 |
$scope.newProduct = function () { $scope.selectedProduct = new $scope.northwind.Products.elementType({ Category_ID: $scope.selectedCategory.Category_ID }); }; |
You can see this example running at http://jaydata.org/examples/AngularJS/ProductEditor where you can also play with it.
To be continued…
