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.
ng-app (ng-app="project")
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>
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:...
}); }]);