2

Fala galera Blz?!

Sou novo em AngularJs.

Estou desenvolvendo um formulário porém não consigo fazer abstração do ng-model. Segue o código abaixo para melhor compreensão.

<- JS ->

/* CONFIGURAÇÃO DO FORM */
        $scope.cfgForm = {
            item: {
                field: ["nome", "idade", "funcao"],
                headers: ["Nome", "Idade", "Função"],
                icon: ["person", "date_range", "business_center"]
            }
        };
        /* DADOS */
        $scope.clientes = [
            {nome: "Pablo Mendoça", idade: 25, funcao: "Estagiário"},
            {nome: "Ricardo Leite", idade: 41, funcao: "Diretor"},
            {nome: "Francisco Motta", idade: 35, funcao: "Gerente de Contas"}
        ];

        /* FUNÇÕES */
        /* ADICIONAR CLIENTE */
        $scope.addCliente = function(cliente){
            console.log(cliente);
        };

<- HTML ->

<div>
                        <!--{{cfgForm.item.field[k]}}-->
                        <md-input-container md-no-float class="md-block" ng-repeat="(k,field) in cfgForm.item.field">
                            <label>{{cfgForm.item.headers[k]}}</label>
                            <md-icon><i class="material-icons" >{{cfgForm.item.icon[k]}}</i></md-icon>
                            <input ng-model="cliente.field" type="text">
                            <!--{{cliente.field}}-->
                        </md-input-container>
                        <!--Botões de ação do Card-->
                        {{cliente.field}}
                        <md-card-actions layout="row" layout-align="end center">
                            <md-button class="md-icon-button" ng-click="addCliente(cliente)">
                                <i class="material-icons" >add_box</i>
                                <md-tooltip  md-direction="left">
                                    Adicionar
                                </md-tooltip>
                            </md-button>
                        </md-card-actions>
                    </div>
                </md-card-content>

Bom, o que acontece é que quando coloco o botão de adicionar no ng-repeat ele abstrai o dado e mostra no console, no entanto ele não pode repetir, ou seja, o botão deve ficar fora do ng-repeat. Como estou mostranto acima.

Neste treço do código por exemplo:

{{cliente.field}}

Quando retiro o comentário no 1º {{cliente.field}} ele faz o bind certinho. No entanto o 2º {{cliente.field}} que já está fora do ng-repeat não faz. e o que preciso é justamente que esse faça, deste modo eu consigo passar o dado no ng-click que fica fora do ng-repeat.

Gostaria da ajuda!

1
  • 1
    Antes de oferecer uma resposta definitiva. Identifiquei que voce tem uma lista de clientes em cima dentro de uma tabela. E embaixo voce quer mostrar a informação de um determinado cliente? Como o codigo saberá qual é o cliente que ele vai exibir embaixo? Ou voce precisa fornecer isso através de um clique, ou pelo menos os controller precisa começar informando qual é o clienteSelecionado para exibir os dados embaixo. Commented 11/01/2016 às 13:14

4 Respostas 4

1

Opa! ;)

Tenta fazer isso aqui:

 <input ng-model="cliente[field]" type="text">

Da forma anterior, você estava dando bind no objeto field de cliente, mas você quer acessar o objecto cujo nome está contido na variável field, então partamos para a notação de colchetes! ;)

2
  • Olá Rodmentou, valeu pela dica. Obtive sucesso pois na geração do Json vem o nome do "field". O problema agora é que não consigo recuperar estas informações fora do repeat. Pode me ajudar? Commented 4/01/2016 às 17:12
  • @RickBatera, pode explicar melhor? :)
    – Rodmentou
    Commented 12/01/2016 às 20:36
1
<!DOCTYPE html>
<html ng-app="ornamentum">
<head>
    <title>ORNAMENTUM</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <!--Importação da folha de estilo principal--> 
    <link rel="stylesheet" type="text/css" href="lib/angular-material/angular-material.css">
    <link rel="stylesheet" type="text/css" href="style/material-icons/material-icons.css">
    <link rel="stylesheet" type="text/css" href="lib/angular-material/angular-material.layouts.css">
     <!--Importação da folha de estilo secundário e personalizados--> 
    <link rel="stylesheet" type="text/css" href="style/my-table.css">


     <!--Importação dos scripts principais--> 
    <script src="lib/angular/angular.js"></script>
     <!--Grupo de importações correnpondente ao ANGULAR-MATERIAL--> 
    <script src="lib/angular-animate/angular-animate.js"></script>
    <script src="lib/angular-aria/angular-aria.js"></script>
    <script src="lib/angular-material/angular-material.js"></script>
    <script src="lib/angular-messages/angular-messages.js"></script>
     <!--Grupo de importações correnpondente ao ANGULAR-MATERIAL--> 

     <!--Script inline--> 
    <script>
        // Nomeando o Módulo e fazendo carregamento dos módulos dependentes
        var ornamentum = angular.module("ornamentum", ["ngMaterial"]);
        // Controles
        ornamentum.controller('TituloCtrl', function ($scope) {
            $scope.title = 'Clientes';
        });
        ornamentum.controller('TabelaCtrl', function ($scope) {
            //Este trecho foi retirado de Toolbar

            /* CONFIGURAÇÃO DO FORM */
            $scope.cfgForm = {
                item: {
                    field: ["nome", "idade", "funcao"],
                    headers: ["Nome", "Idade", "Função"],
                    icon: ["person", "date_range", "business_center"]
                }
            };
            /* DADOS */
            $scope.clientes = [
                {nome: "Pablo Mendoça", idade: 25, funcao: "Estagiário"},
                {nome: "Ricardo Leite", idade: 41, funcao: "Diretor"},
                {nome: "Francisco Motta", idade: 35, funcao: "Gerente de Contas"}
            ];

            /* FUNÇÕES */
            /* ADICIONAR CLIENTE */
            $scope.addCliente = function (field) {
                console.log(field);
            };
        });
    </script>

</head>

<body>

    <div ng-cloak>
        <md-content class="md-padding" layout="row" layout-wrap layout-align="center start" layout-xs="column">
            <div flex="50" flex-xs="100" layout="column">

                <md-card>
                    <!--Topo-->
                    <md-toolbar md-scroll-shrink ng-if="true" ng-controller="TituloCtrl" class="md-card-image" >
                        <div class="md-toolbar-tools">
                            <h3>
                                <span>{{title}}</span>
                            </h3>
                            <span flex></span>
                            <!--Botões de ação-->
                            <md-card-actions layout="row" layout-align="end center">
                                <md-button class="md-icon-button">
                                    <i class="material-icons md-light" >add_box</i>
                                    <md-tooltip  md-direction="left">
                                        Adicionar Usuário
                                    </md-tooltip>
                                </md-button>
                            </md-card-actions>
                        </div>
                    </md-toolbar>

                    <!--Corpo do Card-->
                    <md-card-content ng-controller="TabelaCtrl">
                        <!--Tabela-->
                        <table class="md-table">


                            <thead>
                                <tr>
                                    <th class="md-table-header" ng-repeat="i in cfgForm.item.headers">
                                        <a href="">{{i}}</a>
                                    </th>
                                </tr>
                            </thead>


                            <tbody>
                                <tr ng-repeat="c in clientes">
                                    <td class="md-table-content" ng-repeat="(k, v) in c">{{v}}</td>
                                </tr>
                            </tbody>

                        </table>

                        <br />
                        <hr />



                        <div>
                            {{cfgForm.item.field[k]}}
                            <md-input-container md-no-float class="md-block" ng-repeat="field in cfgForm.item.field">
                                <label>{{cfgForm.item.headers[$index]}}</label>
                                <md-icon><i class="material-icons" >{{cfgForm.item.icon[$index]}}</i></md-icon>
                                <input ng-model="cliente[field]" type="text">
                                {{cliente}}
                            </md-input-container>
                            </div>
                            <!--Botões de ação do Card-->
                            <pre>{{cliente[0].nome}}</pre>                           
                            <md-card-actions layout="row" layout-align="end center">
                                <md-button class="md-icon-button" ng-click="addCliente(cliente[0].nome)">
                                    <i class="material-icons" >add_box</i>
                                    <md-tooltip  md-direction="left">
                                        Adicionar
                                    </md-tooltip>
                                </md-button>
                            </md-card-actions>


                    </md-card-content>
                </md-card>

            </div>
        </md-content>
    </div>

</body>

1

Para adicionar o cliente você deve selecioná-lo, através de um link dentro do ngRepeat (pode ou não ser a linha toda) a um método que passa o item para uma variável do scope e através da variável do scope você faz o que precisar ao clicar no botão. algo assim:

<div ng-repeat="item in items">
    // restante do código aqui
    <a ng-click="selecionar(item)">Selecionar</a>
</div>

<button ng-click="adicionar()">Adicionar</button>

$scope.items = [...];

$scope.itemSelecionado = [];

$scope.selecionar = function(item) {
    $scope.itemSelecionado = item;
}

$scope.adicionar = function() {
    console.log($scope.itemSelecionado);
}

Caso contrário você deverá adicionar diretamente do ngRepeat com um botão de adicionar para cada item, mas você já informou que não deseja este comportamento.

0

Está funcionando pois o seu ng-repeat está fazendo uma interação pelos campos ["nome", "idade", "funcao"]

Ou seja, para voce acessar os dados do cliente do lado de fora do repeat, vc deve fornecer o nome dos campos explicitamente: {{cliente.nome}},{{cliente.idade}},{{cliente.funcao}}

6
  • Olá Rogerio. Obrigado pela ajuda. Fiz o que me disse, porém não obtive sucesso. Poderia me ajudar? Commented 4/01/2016 às 17:08
  • ESqueci tambem, voce deve fornecer o indice do cliente que voce quer o nome. Ou seja. {{cliente[0].nome}} Commented 4/01/2016 às 18:28
  • Obrigado pela ajuda Rogério. Infelizmente não obitive sucesso novamente. Vou colocar o código todo para ver o que acontece Ok?! Commented 6/01/2016 às 12:36
  • Seria de grande valia ! Commented 6/01/2016 às 17:27
  • 1
    Rogerio Barreto não soube editar a pergunta, então adicionei o código la em baixo como um comentário. Commented 11/01/2016 às 11:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .