javascript - 使用 Javascript + AngularJs 的函数中的问题

问题描述

我正在为初级编程工作面试学习 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>

标签： javascriptangularjs

解决方案

您的长度有误（您输入了长度）
您没有更改 $scope.produtos （没有拼接），所以很明显为什么这不会影响您的 DOM。
您应该通过 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 将修复该错误，因为它适用于数组的副本。

javascript - 使用 Javascript + AngularJs 的函数中的问题

问题描述

解决方案

推荐阅读