This example is upgrade of angular js tutorial from Tableless by Davi Ferreira. Features added in the code: Filter, Delete and Edit Products, complete crud.
npm install -g brunch
ng-controller (ng-controller="myController")
ng-model (ng-model="item.name")
ng-view (ng-view)
ng-click (ng-click="myFunction()")
ng-repeat (ng-repeat="item in itens")
ng-hide|show (ng-hide="boolean")
ng-href (ng-href="link")
ng-init (ng-init="expression")
ng-readonly (ng-readonly="expression")
ng-disabled (ng-disabled="expression")
Below the basic example with angular js:
<html ng-app>
<head>
<title>Basic Example with Angular JS </title>
<script src="js/libs/angular-1.0.1.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" placeholder="Type your name">
<p>Hello {{ name }} !</p>
</body>
<html>
See JSFiddle.
Store products in items model defined by controller:
function ListProductsController($scope) {
$scope.items = [
{product: 'Milk', amount: 2, purchased: false},
{product: 'Beer', amount: 12, purchased: false}
];
}
Now, list products with http request to return items json:
function ListProductsController($scope) {
$scope.fetchProductsList = function() {
$http.get('http://www.url.com/products').success(function(products){
$scope.items = products;
});
}
}
Show products in view:
<div ng-controller="ListaComprasController">
<table>
<thead>
<tr>
<th>Produto</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in itens">
<td><strong>{{ item.produto }}</strong></td>
<td>{{ item.quantidade }}</td>
</tr>
</tbody>
</table>
</div>
Added the filter attr in the ng-repeat to enabled filter:
<tr ng-repeat="item in items | filter:search">
Also added a input text to search products:
<input type="search" ng-model="search" placeholder="Search by…">
Add products in view:
<form name="products">
<input type="text" ng-model="item.product">
<input type="number" ng-model="item.amount">
<button ng-click="addItem()">add item</button>
</form>
Functions in controller:
Add item in the items array
$scope.addItem = function () {
$scope.items.push({product: $scope.item.product, amount: $scope.item.amount, purchase: false});
};
Add item with HTTP Request
$scope.addItem = function(product) {
$http.post('/products/', product).success(function(product) {
toastr.success("Item added.");
$scope.items.push(product);
}).error(function(data) {
toastr.error("Fail on adding product.");
});
};
Remove products in view:
<button class="btn btn-danger btn-small" ng-click="deleteItem($index)">
<i class="icon-trash icon-white"></i> remove
</button>
Function to delete item in Controller
$scope.deleteItem = function(index){
$scope.items.splice(index, 1);
};
Edit products used the main button from form to change the product with the ng-hide and ng-show in view:
$scope.editItem = function(index){
$scope.item = $scope.items[index];
};
var application = {};
var App = angular.module('application');
App.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/products', { templateUrl: 'views/products/list.html', controller: ProductsControllers })
.when('…', { templateUrl: '…', controller: ... });
}]);