angularJs form with ng-repeat

Question

angularJs form with ng-repeat

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

2

Talk about the Blz gal?!

I'm new to AngularJs.

I'm developing a form but I can not do ng-model abstraction. Follow the code below for a better understanding.

< - 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);
        };

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

Well, what happens is that when I put the add button on ng-repeat it abstracts the data and shows it on the console, however it can not repeat, ie the button should stay outside ng-repeat. As I am shown above.

In this code section for example:

When I post the comment on 1st {{client.field}} it binds right. However the 2nd {{client.field}} that is already outside ng-repeat does not. and what I need is just do this, so I can pass the data on the ng-click that is outside the ng-repeat.

I would like help!

angularjs

asked by anonymous 30.12.2015 / 17:58

4 answers

My site gets messed up on Microsoft Edge, Firefox and Safari. How to solve this problem? [closed] doubts with ajax and angular

score 1 · Answer 1

Oops! ;)

Try to do this here:

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

In the previous way, you were binding on the object field of cliente , but you want to access the object whose name is contained in the variable field , so let's start with the notation brackets ;)

score 1 · Answer 2

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

score 1 · Answer 3

To add the client you must select it through a link inside ngRepeat (it may or may not be the whole line) to a method that passes the item to a scope variable and through the scope variable you do it you need when you click the button. something like this:

<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);
}

Otherwise you should add directly from ngRepeat with an add button for each item, but you have already indicated that you do not want this behavior.

score 0 · Answer 4

It's working because your ng-repeat is doing an interaction with the fields ["nome", "idade", "funcao"]

In other words, for you to access the client data outside the repeat, you must explicitly give the field names: {{cliente.nome}},{{cliente.idade}},{{cliente.funcao}}