problem in a function using Javascript + AngularJs

Question

I am studying AngularJS and Javascript for a junior programming job interview and found this problem : my function excluir() which is supposed to remove an item from my list simply doesn't work : nothing happens when I click there.

I find weird that I don't receive any type of error or log. Maybe I am doing something wrong, can someone give me a help?

<!DOCTYPE html>

<html ng-app="produtosApp">
    <head>
        <title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body ng-controller="ProdutosController">
        <!-- Cadastro -->
        <form>
            <h1>Cadastro</h1>
            <label for="codigo">Código: </label>
            <input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
            <br>
            <label for="descricao">Descrição: </label>
            <input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
            <br>
            <label for="preco">Preço: </label>
            <input id="preco" name="preco" type="text" ng-model="produto.preco"/>
            <br>
            <br>  
            <button ng-click="salvar(produto)"> Salvar </button>
        </form>    

        <!-- Tabela de Preços -->   
        <h1>Tabelas de Preços</h1>
        <table>
            <thead>
                <tr>
                    <th>Código</th>
                    <th>Descrição</th>
                    <th>Preço</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="produto in produtos track by $index">
                    <td>{{produto.id}}</td>
                    <td>{{produto.descricao}}</td>
                    <td>{{produto.preco}}</td>
                    <td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
                </tr>
            </tbody>
        </table>

        <script src="js/angular.min.js"></script>
        <script

            var app = angular.module('produtosApp', []);

            app.controller('ProdutosController', function($scope){

                var produtos = [{
                    id: 1,
                    descricao: 'Arroz',
                    preco: 2.50
                }, {
                    id: 2,
                    descricao: 'Feijao',
                    preco: 3.50
                }];

                $scope.produto = {};    
                $scope.produtos = produtos;


                $scope.salvar = function(produto) {
                    produtos.push(produto);
                    $scope.produto = {}; 
                };

                $scope.excluir = function(produto) {
                    for(var i = 0, lenght = produtos.lenght; i < lenght; i++){
                        if(produtos[i].id === produtos.id){
                            produtos.splice(i, 1);
                        }
                    }
                };

            });

        </script>
    </body>
</html>

Answer 1

You have a typo in length (you typed lenght)
you are not changing the $scope.produtos (not splicing that) so it is apparent why that is not affecting your DOM.
you should make the compare by produto.id not produtos.id ! the code then should becomes:

  var app = angular.module('produtosApp', []); app.controller('ProdutosController', function($scope){ var produtos = [{ id: 1, descricao: 'Arroz', preco: 2.50 }, { id: 2, descricao: 'Feijao', preco: 3.50 }]; $scope.produto = {}; $scope.produtos = produtos; $scope.salvar = function(produto) { produtos.push(produto); $scope.produto = {}; }; $scope.excluir = function(produto) { for(var i = 0,length = $scope.produtos.length; i < length; i++){ if($scope.produtos[i].id === produto.id){ $scope.produtos.splice(i, 1); } } }; });

 <html ng-app="produtosApp"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <title>Desenvolvendo Aplicações Web com AngularJS e Java</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body ng-controller="ProdutosController"> <!-- Cadastro --> <form> <h1>Cadastro</h1> <label for="codigo">Código: </label> <input id="codigo" name="codigo" type="text" ng-model="produto.id"/> <br> <label for="descricao">Descrição: </label> <input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/> <br> <label for="preco">Preço: </label> <input id="preco" name="preco" type="text" ng-model="produto.preco"/> <br> <br> <button ng-click="salvar(produto)"> Salvar </button> </form> <!-- Tabela de Preços --> <h1>Tabelas de Preços</h1> <table> <thead> <tr> <th>Código</th> <th>Descrição</th> <th>Preço</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="produto in produtos track by $index"> <td>{{produto.id}}</td> <td>{{produto.descricao}}</td> <td>{{produto.preco}}</td> <td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td> </tr> </tbody> </table> </body> </html>

I also suggest using anular.forEach instead of for for iterating the array. you can see there is an error when you delete an item off your array which will be fixed if you use anfgular.forEach because that works with copy of the array.

problem in a function using Javascript + AngularJs

Question

1 answers

solution1
-1 2019-03-09 08:03:05

problem in a function using Javascript + AngularJs

Question

1 answers

solution1 -1 2019-03-09 08:03:05

solution1
-1 2019-03-09 08:03:05