{"action":"created","issue":{"url":"https://api.github.com/repos/hjzheng/CUF_meeting_knowledge_share/issues/29","labels_url":"https://api.github.com/repos/hjzheng/CUF_meeting_knowledge_share/issues/29/labels{/name}","comments_url":"https://api.github.com/repos/hjzheng/CUF_meeting_knowledge_share/issues/29/comments","events_url":"https://api.github.com/repos/hjzheng/CUF_meeting_knowledge_share/issues/29/events","html_url":"https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/29","id":68270515,"number":29,"title":"2015-4-14 angular实现ng-repeat递归","user":{"login":"hjzheng","id":4166657,"avatar_url":"https://avatars.githubusercontent.com/u/4166657?v=3","gravatar_id":"","url":"https://api.github.com/users/hjzheng","html_url":"https://github.com/hjzheng","followers_url":"https://api.github.com/users/hjzheng/followers","following_url":"https://api.github.com/users/hjzheng/following{/other_user}","gists_url":"https://api.github.com/users/hjzheng/gists{/gist_id}","starred_url":"https://api.github.com/users/hjzheng/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hjzheng/subscriptions","organizations_url":"https://api.github.com/users/hjzheng/orgs","repos_url":"https://api.github.com/users/hjzheng/repos","events_url":"https://api.github.com/users/hjzheng/events{/privacy}","received_events_url":"https://api.github.com/users/hjzheng/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-04-14T05:58:21Z","updated_at":"2015-09-21T02:31:41Z","closed_at":null,"body":"### AngularJS recursive templates\r\nhttp://benfoster.io/blog/angularjs-recursive-templates\r\nhttp://www.cnblogs.com/kuangliu/p/4146705.html\r\n\r\n>工作中我们经常要遍历多层数据，如果数据是已知层级的话，用 ng-repeat 就搞定了，要是数据深度是无限的呢，或者我们要实现一个无限层级的 tree 的时候，该怎么办？\r\n>答案是使用 ng-include 指令递归模板\r\n\r\n#### Example\r\nHTML\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang=\"en\">\r\n    <meta charset=\"UTF-8\">\r\n    <title></title>\r\n    <link href=\"../../vendor/bootstrap/css/bootstrap.min.css\" rel=\"stylesheet\"/>\r\n    <link href=\"../../vendor/bootstrap/css/bootstrap-theme.min.css\" rel=\"stylesheet\"/>\r\n</head>\r\n<body ng-app>\r\n   <div ng-controller=\"treeController\" class=\"container\">\r\n       <div class=\"row\">\r\n           <h2>ng-repeat recursive list example</h2>\r\n           <ul>\r\n               <li ng-repeat=\"item in tree\" ng-include=\"'treeItem'\"></li>\r\n           </ul>\r\n       </div>\r\n   </div>\r\n\r\n    <script src=\"../../vendor/angularjs/angularjs.js\"></script>\r\n    <script src=\"treeList.js\"></script>\r\n    <script type=\"text/ng-template\" id=\"treeItem\">\r\n        {{item.id}} --- {{item.name}}\r\n        <ul ng-if=\"item.children\">\r\n           <li ng-repeat=\"item in item.children\" ng-include=\"'treeItem'\">\r\n           </li>\r\n       </ul>\r\n    </script>\r\n</body>\r\n</html>\r\n```\r\ntreeList.js\r\n```javascript\r\n/**\r\n * Created by hjzheng on 2014/10/27.\r\n */\r\nvar treeController = function ($scope) {\r\n    $scope.tree = [\r\n        { id: 1, name: 'John', score: 130, city: 'New York', birthday: '1980/2/5',\r\n            children:[\r\n                { id: 6, name: 'John2', score: 82, city: 'San Fran1', birthday: '1990/1/21'},\r\n                { id: 7, name: 'John2', score: 81, city: 'San Fran2', birthday: '1990/1/22',\r\n                    children:[{ id: 8, name: 'John3', score: 89, \r\n                                               city: 'San Francisco', birthday: '1990/1/21'}]\r\n                }\r\n            ]\r\n        },\r\n        { id: 2, name: 'Alice', score: 123, city: 'Washington', birthday: '1984/3/7'},\r\n        { id: 3, name: 'Lee', score: 149, city: 'Shanghai', birthday: '1986/10/8'},\r\n        { id: 4, name: 'Mike', score: 100, city: 'London', birthday: '1988/8/12'},\r\n        { id: 5, name: 'Tom', score: 89, city: 'San Francisco', birthday: '1990/1/21',\r\n            children: [\r\n               { id: 9, name: 'Tom1', score: 77, city: 'San Francisco', birthday: '1990/1/21'},\r\n               { id: 10, name: 'Tom2', score: 85, city: 'San Francisco', birthday: '1990/1/21'},\r\n               { id: 11, name: 'Tom3', score: 83, city: 'San Francisco', birthday: '1990/1/21'}\r\n            ]\r\n        }\r\n    ];\r\n}\r\n```\r\n\r\n### Angular Tree Grid（自己实现）\r\n通过Angular自定义Filter，实现复杂Tree数据遍历(复杂数据参见上面的例子)和过滤(对expend数据过滤)\r\nExample:\r\nhttp://jsfiddle.net/hjzheng/78jz0mrL/ （翻墙）"},"comment":{"url":"https://api.github.com/repos/hjzheng/CUF_meeting_knowledge_share/issues/comments/141862083","html_url":"https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/29#issuecomment-141862083","issue_url":"https://api.github.com/repos/hjzheng/CUF_meeting_knowledge_share/issues/29","id":141862083,"user":{"login":"hjzheng","id":4166657,"avatar_url":"https://avatars.githubusercontent.com/u/4166657?v=3","gravatar_id":"","url":"https://api.github.com/users/hjzheng","html_url":"https://github.com/hjzheng","followers_url":"https://api.github.com/users/hjzheng/followers","following_url":"https://api.github.com/users/hjzheng/following{/other_user}","gists_url":"https://api.github.com/users/hjzheng/gists{/gist_id}","starred_url":"https://api.github.com/users/hjzheng/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hjzheng/subscriptions","organizations_url":"https://api.github.com/users/hjzheng/orgs","repos_url":"https://api.github.com/users/hjzheng/repos","events_url":"https://api.github.com/users/hjzheng/events{/privacy}","received_events_url":"https://api.github.com/users/hjzheng/received_events","type":"User","site_admin":false},"created_at":"2015-09-21T02:31:41Z","updated_at":"2015-09-21T02:31:41Z","body":"@fulicat 其实最好的方式是不要使用filter去实现tree grid, 可以找一下第三方的，看看是如何实现的！"}}