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

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

Share Improve this question edited Jan 29, 2016 at 23:13 asked Jan 29, 2016 at 23:01 Lucas Torres 2221 gold badge2 silver badges12 bronze badges

1 What do you mean? Angular doesn't stop you from using document.getElementsByName/document.getElementById. – Mike Cluck Commented Jan 29, 2016 at 23:02
In what context are you trying to getElementByName? I feel that you are probably trying to do something that ng-model facilitates. – zero298 Commented Jan 29, 2016 at 23:03
2 Just use data binding. Trying to force stuff into controls with jquery leads to ugly, unmaintainable code. If you want that type of code, angular may not be your best choice. – Amy Blankenship Commented Jan 29, 2016 at 23:05
I will edit the question with my code – Lucas Torres Commented Jan 29, 2016 at 23:10

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - GetElementById in AngularJS - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)