проблема в функции с использованием Javascript + AngularJs - PullRequest
Новая
       12

проблема в функции с использованием Javascript + AngularJs

1 голос
/ 09 марта 2019

Я изучаю AngularJS и Javascript для младшего собеседования по программированию и обнаружил эту проблему: моя функция excluir(), которая должна удалить элемент из моего списка, просто не работает: когда я нажимаю там, ничего не происходит.

Я нахожу странным, что я не получаю никаких ошибок или журналов.Может я что-то не так делаю, может кто-нибудь мне поможет?

<!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>

1 Ответ

0 голосов
/ 09 марта 2019
  1. У вас есть опечатка в длину (вы ввели длину)
  2. вы не изменяете $ scope.produtos (не склеивая это), поэтому очевидно, что это не влияет на вашу DOM.
  3. Вы должны сделать сравнение по produto.id, а не по produtos.id!тогда код должен стать: 

 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>

Я также предлагаю использовать anular.forEach вместо for для итерации массива.вы можете видеть, что при удалении элемента из вашего массива возникает ошибка, которая будет исправлена, если вы используете anfgular.forEach, потому что это работает с копией массива.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...