如何获取html元素id，通过angularjs

通过angularjs获取html元素id没有直接的方法，因为id是一个dom *** 作。

Angular不会帮助用户获得DOM的某个属性。如果需要使用的是DOM选择器，不管是原生的也好或者像jQuery这样的库也好。

官方说法：不能在控制器里面做DOM *** 作，那我就把DOM *** 作相关的代码放到指令里面好了这种做法确实是好一些了，但是通常还是是错误的。

如下代码可以实现点击页面获得被点击元素的id

$(document)click(function(e) { // 在页面任意位置点击而触发此事件

  $(etarget)attr("id");       // etarget表示被点击的目标

})

示例代码如下

创建Html元素

<div class="box">

<span>点击页面后，设置被点击元素背景色并获取其id：</span><br>

<div class="content" id = "test">test

<div id = "test1">test1

<div id = "test2">test2

<div id = "test3">test3</div>

</div>

</div>

</div>

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

divcontent div{min-width:20px;min-height:20px;padding:30px;border:1px solid #446699;background:#ffffff;}

bg{background:#ff99cc !important;}

编写jquery代码

$(function(){

$(document)click(function (e) {

$(etarget)addClass('bg');     // 设置背景色

alert($(etarget)attr('id'));  // 获取id

})

})

观察效果

初始状态

点击id为test2的div

使用 each 方法， 假设你的 jQuer 元素是 el , 大概代码是：

$(el)each(function(index,el){

consolelog( $(el)attr('id') );

})

each 是 jQuery 提供的遍历方法，第一个参数是索引，第二个参数是遍历对象的值。

1、新建一个html文件，命名为testhtml。

2、在testhtml文件中，使用script标签加载jqueryminjs文件，成功加载该文件，才能使用jquery方法。

3、在js标签内，在页面加载完成时，获取body对象，使用append()方法向body动态添加一个div元素。

4、在testhtml文件中，使用button标签创建一个按钮，按钮名称为“获取id值”。

5、在testhtml文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getid（）函数。

6、在js标签内，创建getid()函数，在函数内，通过元素名称获得div对象，使用attr()方法获得动态添加div的id值，并使用alert()方法将值输出。

7、在浏览器打开testhtml文件，点击按钮，查看结果。

$(function(){

l=$("div")length;

$("input")click(function(){

for(i=0;i<l;i++){

a=$("div")eq(i)css("z-index");

b=$("div")eq(i)attr("id");

if(a==100){

alert(b)

}

}

})

})<div id="div_1" class="c1" style="z-index:100; position:relative">1<input type="button" name="" value="点我" /></div>

<div id="div_2" class="c1" style="z-index:200; position:relative">2</div>

<div id="div_3" class="c1" style="z-index:300; position:relative">3</div>

<div class="c2"></div>

<div class="c3"></div>

不明白就追问

以上就是关于如何获取html元素id，通过angularjs全部的内容，包括:如何获取html元素id，通过angularjs、jQuery如何实现点击页面获得当前点击元素的id或其他信息、如何遍历jquery元素获取所有id等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！