javascript - AngularJS 中的 GetElementById

标签 javascript angularjs forms

什么是 document.getElementByName AngularJS 的等价物? 我正在使用 AngularJS 进行表单的编辑部分,并希望在输入中注入(inject)从数据库中获取的值。之后将编辑输入内容并随后执行 ALTER TABLE。 后端使用 PHP。

编辑

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

最佳答案

Amy Blankenship 一针见血,您应该使用 Angular 最强大的功能(如数据绑定(bind)),而不是直接获取元素。

也就是说,如果你真的想这样做,你可以:

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

关于javascript - AngularJS 中的 GetElementById,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35095656/

相关文章:

javascript - 递归堆栈 - Javascript

javascript - 用 $http.get() 数据填充 Chart js

html - Angular 下拉子菜单

javascript - 使用 onclick 将变量传递给表单

javascript - 上传的文件大小说未定义

php - 为什么要使用隐藏字段来检测表单提交?

javascript - 背景图像 div 周围不需要的边框

javascript - 如何为 Canvas "drawing style"应用程序获取平滑的鼠标事件?

javascript - 网站 url 的正则表达式

javascript - 使用 javascript、angular.js 和 sql.js,如何从 url 获取文件对象?