data - * 属性是HTML5中的新标签, data-* 属性用于存储页面或应用程序的私有自定义数据,也就是 data-* 自定义属性,使用方式类似于 input 标签中的 value 属性。
e.g.在 AngularJS 中使用 data-id 属性
<ul ng-app=" myApp" ng-controller="ControllerDemo">
<li id="li" ng-repeat="item in data" data-id="item.id">
<span>{{ item.name }}</span>
<span>{{ item.age }}</span>
</li>
</ul>
<script>
(function() {
angular.module('myApp', [])
.controller('ControllerDemo', function($scope) {
var data = [
{ id: 1, name: '张三', age: 19 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 33 },
];
$scope.data = data;
});
})();
</script>
获取方式:
- 原生 JS:
var li = document.getElementById("li");
console.log(li.getAttribute("data-id")); // item.id
- jQuery:
console.log($("#id").attr("data-id")); // item.id