data - * 属性的使用和获取

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>

获取方式：

1. 原生 JS：

var li = document.getElementById("li");
console.log(li.getAttribute("data-id"));  // item.id

2. jQuery:

console.log($("#id").attr("data-id"));  // item.id