Soy nuevo en Angular 1.0 y vengo de jQuery backgroud.
Digamos que tengo el siguiente HTML:
<div id="filters"> <div id="filter1">Filter 1</div> <div id="filter2">Filter 2</div> <div id="filter3">Filter 3</div> <div id="filter4">Filter 4</div> </div>Ahora quiero tener una función que devuelva la identificación del elemento secundario en el que se hace clic. ¿Cuál podría ser la forma angular de implementar mejor el siguiente código jQuery?
$('#filters div').on('click', function() { alert($(this).attr("id")); });La forma más fácil de hacerlo es crear una matriz y recorrerla a través del DOM usando ng-repeat luego puede pasar el objeto como parámetro para hacer clic en la función y obtener la identificación
<div id="filters"> <div ng-click="check(item)" ng-repeat="item in arr" id="{{item.id}}">{{item.name}}</div> </div>matriz de muestra
[{"name":"Filter 1","id":"filter1"},{"name":"Filter 2","id":"filter2"},{"name":"Filter 3","id":"filter3"},{"name":"Filter 4","id":"filter4"}] si no desea usar la repetición ng, le sugiero que pase $event.target como parámetro para el evento de clic
<div id="filters"> <div id="filter1" ng-click="getID($event.target)">Filter 1</div> <div id="filter2" ng-click="getID($event.target)">Filter 2</div> <div id="filter3" ng-click="getID($event.target)">Filter 3</div> <div id="filter4" ng-click="getID($event.target)">Filter 4</div> </div>La función
$scope.getID = function(item){ console.log(item.id) };Manifestación
angular.module("app",[]) .controller("ctrl",function($scope){ $scope.arr = [{"name":"Filter 1","id":"filter1"},{"name":"Filter 2","id":"filter2"},{"name":"Filter 3","id":"filter3"},{"name":"Filter 4","id":"filter4"}] $scope.check = function(item){ console.log(item.id) } $scope.getID = function(item) { console.log(item.id) }; }) <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <p> using ng repeat </p> <div id="filters"> <div ng-click="check(item)" ng-repeat="item in arr" id="{{item.id}}">{{item.name}}</div> </div> <br> <p> using $event </p> <div id="filters"> <div id="filter1" ng-click="getID($event.target)">Filter 1</div> <div id="filter2" ng-click="getID($event.target)">Filter 2</div> <div id="filter3" ng-click="getID($event.target)">Filter 3</div> <div id="filter4" ng-click="getID($event.target)">Filter 4</div> </div> </div>Puede crear una directiva que adjunte al padre y esta directiva podría vincularse al evento onClick para todos los hijos.
function getChildrenid() { return { restrict: 'A', link: function(scope, element, attributes) { var children = element[0].querySelectorAll('div'); //get all child div's angular.forEach(children, function(child) { //loop over all the child var ngElement = angular.element(child); //create an angular element of the child ngElement.on('click', function() { //bind to the click event console.log(ngElement.attr('id')); }); }); } }; } function MainController() { // } angular.module('app', []); angular.module('app') .controller('MainController', MainController) .directive('getChildrenid', getChildrenid); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> <div ng-app="app"> <div ng-controller="MainController as ctrl"> <div id="filters" get-childrenid> <div id="filter1">Filter 1</div> <div id="filter2">Filter 2</div> <div id="filter3">Filter 3</div> <div id="filter4">Filter 4</div> </div> </div> </div>Puede usar un ngRepeat para representar a los elementos secundarios en lugar de enumerarlos todos por separado y en los elementos secundarios repetidos puede agregar un ngClick.
Puede agregar un ngClick a cada elemento secundario por separado.
En angular, cuando hace clic en un elemento, obtiene un objeto de evento .
Este objeto tiene una propiedad toElement que te da el elemento que recibió el evento. Luego puede simplemente usar toElement.id para mostrar la identificación:
function MyController() { this.getId = function(event) { console.log(event.toElement.id); } } angular.module('app', []); angular.module('app') .controller('MyController', MyController); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> <div ng-app="app"> <div ng-controller="MyController as ctrl"> <div id="filters" ng-click="ctrl.getId($event)"> <div id="filter1">Filter 1</div> <div id="filter2">Filter 2</div> <div id="filter3">Filter 3</div> <div id="filter4">Filter 4</div> </div> </div> </div>