Este post foi inspirado pela a proposta apresentada pelo o site Tableless desenvolvido pelo o Davi Ferreira que implementa uma aplicação usando o Angular JS.

Para tornar essa aplicação um pouco mais atraente foram adicionados os recursos de filtro, edição e remoção de itens. Quer ver o código fonte do projeto? Fork no GitHub.

A aplicação é um cadastro de produtos, vamos entender o funcionamento de cada feature nos exemplos abaixo:

Listando produtos

Exemplo de como carregar os produtos no model usando o objeto items:

    function ListProductsController($scope) {
        $scope.items = [
            {product: 'Milk', amount: 2, purchased: false},
            {product: 'Beer', amount: 12, purchased: false}
        ];
    }

Ou você pode simplesmente carregar os produtos através de http request:

    function ListProductsController($scope) {
        $scope.fetchProductsList = function() {
            $http.get('url/products').success(function(products){
                $scope.items = products;
            });
        }
    }

Listando produtos do model na 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>

Filtrando produtos na view

Adicionando o atributo filter dentro do ng-repeat:

    <tr ng-repeat="item in items | filter:search">

Adicionando um campo texto para realizar o filtro de produtos:

    <input type="search" ng-model="search" placeholder="Search by…">

Adicionando Produtos

Controller:

    $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.");
        });
    };

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>

Removendo Products

Controller

    $scope.deleteItem = function(index){
        $scope.items.splice(index, 1);
    };

View

    <button ng-click="deleteItem($index)">
        <i></i> remove
    </button>

Editando Produtos

O botão de edição usa as diretivas ng-hide e ng-show para o mostrar o item selecionado no formulário da view:

    $scope.editItem = function(index){
        $scope.item = $scope.items[index];
    };