1
resposta

Problema para inserir os dados na tabela

Eu estava tentando puxar os dados de Cliente.nome no input por meio de um ng-click, aonde ele iá passar em função de adicionar e essa função irá retornar uma lista de clientes e jogar isso em uma tabela.

Quando aperto perto no botãoo ele adiciona os dados no array, por meio de um push,porém não estou conseguindo levar esse dados a tabela.

**Eu coloquei o codigo de angular no apenas pra treinar,mas a frente irei criar diretórios específicos para cada um.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Restaurante</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script>
        angular.module("appRestaurante",[]);

        angular.module("appRestaurante").controller("cozinhaCtrl",function($scope) {

        });

        angular.module("appRestaurante").controller("recepcaoCtrl",function($scope) {


            $scope.clientes = [{nome: "Jorge"},
                               {nome: "Mateus"}];
            //Main functions__________________________________________
            $scope.adicionarCliente = function(cliente) {
                $scope.clientes.push(cliente.nome);
                console.log("action",$scope.clientes);
//                delete $scope.$4;
            }
        });



            //Functions________________________________________________


    </script>
</head>
<body ng-app="appRestaurante">

<div class="jumbotron">
    <h1>Restaurante</h1>
</div>

<div class="container">
    <h2>Clientes</h2>

    <table class="table"  ng-controller="recepcaoCtrl">
        <thead>
        <tr>
            <th>Nome</th>
        </tr>

        </thead>
        <tbody>
        <tr ng-repeat="cliente in clientes">
            <td>
                {{cliente.nome}}
            </td>

        </tr>
        </tbody>
    </table>

</div>


<div ng-include="'/home/pedro-ramalho/Documentos/AngularJS/RodrigoBranas/Meu/angularJS/html/tabelaServicos.html'"> </div>




<div class="container jumbotron">

    <h2>Adicionar</h2>

    <form ng-controller="cozinhaCtrl">
        <h3>Comida</h3>
        <div class="form-group">
            <input class="form-control"  placeholder="Nome"  ng-model="nomeComida">
        </div>
        <button type="submit" class="btn btn-primary">Adicionar</button>
    </form>


    <form ng-controller="recepcaoCtrl">
        <h3>Cliente</h3>
        <div class="form-group">
            <input class="form-control"  placeholder="Nome" ng-model="cliente.nome">
        </div>
        <button type="submit" class="btn btn-primary" ng-click="adicionarCliente(cliente)">Adicionar</button>
        {{cliente}}
    </form>




</div>



</body>
</html>
1 resposta

Bom dia! Experimente fazer assim:

$scope.clientes = $scope.clientes.concat(cliente.nome);

Você esta criando uma nova referência para o array de clientes em o novo item e isso fará o mecanismo de change detection do Angular ficar mais esperto.