CODEWITHSUNDEEP
javascripthtmlangularjs
Daniela Morais
Daniela Morais

Reputation: 2237

Get id of the HTML element with AngularJS

I need to get the specific id of each line and forward to a JS function that will make an http request. But I'm having trouble calling this function, excluir(id), the parameters are correct but the alert doesn't run.
Why is that?

HTML 

<!DOCTYPE html>
<html ng-app="oknok">
<head lang="pt-br">
    <meta charset="UTF-8"/>
    <title>OKNOK Admin</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="js/controller.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body ng-controller="indexController" data-ng-init="init()">
<div class="container">
    <h2>Listagem de ve&iacute;culos</h2>
    <table class="table table-condensed">
        <thead>
        <tr>
            <th>Nome</th>
            <th>Tipo</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="x in resultado">
            <td ng-model="nome">{{x.nome}}</td>
            <td ng-model="tipo">{{x.tipo}}</td>
            <td ng-model="lixeira"><span class="glyphicon glyphicon-trash" ng-click="excluir({{x._links.self.href}})"></span></td>
        </tr>
        </tbody>
    </table>

<div align="right">
<button type="button" class="btn btn-primary" ng-click="adicionarNovo()">Adicionar novo</button>
</div>
</div>
</body>
</html>

Controller.js

var oknok = angular.module('oknok', []);

oknok.controller('indexController', function ($scope, $http) {
    $scope.init = function () {
        $http.get("/api/veiculos")
            .then(function (data) {
                var embedded = data.data._embedded;
                $scope.resultado = embedded.veiculos;
            }).catch(function (error) {
                alert("Erro ao obter dados!\n" + error);
            });
    };

    $scope.adicionarNovo = function () {
        window.location.href = "/cadastro";
    };

    $scope.excluir = function (id) {
        alert("clicou" + "\t" + id);
    }
});

Upvotes: 0

Views: 893

Answers (2)

borracciaBlu
borracciaBlu

Reputation: 4225

The functions don't need {{}} as everybody said before on ng-click remove them.

Like that :

ng-click="excluir(x._links.self.href)"

Upvotes: 2

vidalsasoon
vidalsasoon

Reputation: 4401

Try injecting "$window" instead. That way, you'll be sure the window object has the proper angular lifecycle:

var oknok = angular.module('oknok', []);

oknok.controller('indexController', function ($scope, $http, $window) {
    $scope.init = function () {
        $http.get("/api/veiculos")
            .then(function (data) {
                var embedded = data.data._embedded;
                $scope.resultado = embedded.veiculos;
            }).catch(function (error) {
                $window.alert("Erro ao obter dados!\n" + error);
            });
    };

    $scope.adicionarNovo = function () {
        $window.location.href = "/cadastro";
    };

    $scope.excluir = function (id) {
        $window.alert("clicou" + "\t" + id);
    }
});

Upvotes: 0

Related Questions