CODEWITHSUNDEEP
javascriptangularjsforms
Lucas Torres
Lucas Torres

Reputation: 222

GetElementById in AngularJS

What is the equivalent of document.getElementByName AngularJS ? I'm doing the edit portion of the form using AngularJS, and wanted to inject the values ​​obtained od database within an input . After that would edit the input content and subsequently perform ALTER TABLE. The backend is in PHP.

EDit

<!DOCTYPE html>
<html ng-app="myCrud">
<head>
    <title>CRUD AngularJS</title>
    <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" src="angular/angular.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css">
<style>
    .jumbotron {

        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .table {
        margin-top: 20px;
    }
    .form-control {
        margin-bottom: 5px;
    }
</style>
<script type="text/javascript">
    angular.module("myCrud", []);
    angular.module("myCrud").controller("myCrudCtrl", function ($scope, $http) {
        $scope.tit = "CRUD AngularJS e PHP";

        $scope.adicionarUsuario = function (usuario) {
            $http.post("salvar.php", usuario).success(function (data){
                delete $scope.usuario;
                $scope.usuarioForm.$setPristine();
                carregarUsuario();
            });
        };
        var carregarUsuario = function () {
            $http.get("buscar.php").then(function (retorno){
                console.log(retorno.data);
                $scope.usuarios = retorno.data;
            }); 
        };

        $scope.editarUsuario = function (usuario){
            $scope.messagem =  usuario.nome;

          /*  $http.post("editar.php", usuario).success(function (data){
                delete $scope.usuario;
                $scope.usuarioForm.$setPristine();
                carregarUsuario();                
            });   */
            //////////////////////////////////THE QUESTION POINT


        };        
        $scope.apagarUsuario = function (usuario) {               
            $http.delete("apagar.php", {params: {id: usuario}}).success(function (data, status){
                carregarUsuario();
                $scope.messagem(data.msg);
            });
        };
        $scope.ordenarPor = function (campo) {
                $scope.criterioDeOrdenacao = campo;
                $scope.direcaoDaOrdenacao = !$scope.direcaoDaOrdenacao;
            };

        carregarUsuario();

    });
</script>
</head>
<body ng-controller="myCrudCtrl">
    <div class="jumbotron">
        <h4>{{tit}}</h4>
        <h6>{{messagem}}</h6>
        <input class="form-control" type="text" ng-model="criterioDeBusca" placeholder="O que você está buscando?"/>
        <table class="table">
            <tr>
                <td><a href="" ng-click="ordenarPor('nome')"><b>Nome</b></a></td>
                <td><a href="" ng-click="ordenarPor('email')"><b>Email</b></a></td>
                <td><b>Password</b></td>
                <td></td>
                <td></td>
            </tr>
            <tr ng-repeat="usuario in usuarios | filter:criterioDeBusca | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao">
                <td>{{usuario.nome}}</td><!-- <a href="#" editable-text="usuario.name">{{ usuario.name || "empty" }}</a>-->
                <td>{{usuario.email}}</td>
                <td>{{usuario.pass}}</td>
                <td><button class="btn btn-xs btn-alert" ng-click="editarUsuario(usuario)">Editar</button></td>
                <td><button class="btn btn-xs btn-danger" ng-click="apagarUsuario(usuario.id)">Apagar</button></td>
            </tr>
        </table>

        <hr>

        <form name="usuarioForm">
            <input class="form-control" id="inputnome" type="text" ng-model="usuario.nome" placeholder="Nome">
            <input class="form-control" type="text" ng-model="usuario.email" placeholder="Email">
            <input class="form-control" type="text" ng-model="usuario.pass" placeholder="Senha">
        </form>

        <button class="btn btn-primary" ng-click="adicionarUsuario(usuario)">Adicionar</button>
    </div>

</body>
</html>

Upvotes: 1

Views: 11198

Answers (1)

sg.cc
sg.cc

Reputation: 1826

Amy Blankenship hit the nail on the head there, that you should use Angular's strongest features (like data binding) instead of getting elements directly.

That said, if you really want to do this, you can:

angular.element( document.getElementById('someElement') )

Upvotes: 5

Related Questions