在ng-repeat中插入标签

Question

我有一个json数据，我想用angularjs做这个：

<ul>
<li>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
</li>
<li>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
</li>
<li>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
    <span>{{data.name}}</span>
</li>
</ul>

我希望使用ng-repeat但是我想每6个跨度插入一个li。

<ul>
<li ng-repeat="data in dataset track by $index">
    <span>{{data.name}}</span>
</li>
</ul>

我的json文件：

[
{
    "name": "test"
}
    "name": "test"
},
{
    "name": "test"
}
]

我的控制器，它只获取json文件：

function troupesController($scope, $routeParams, $http) {
 $http.get('js/data/troupes.json').success(function(data) {

     $scope.dataset = data;
});

}

Answer 1

在这种情况下，我认为最好的方法是使用指令。

示例：

 <div ng-controller="ctrl">
    <ul>
        <div custom-Directive="" dataset="dataset"></div>          
    </ul>

</div>

控制器：

function ctrl($scope){
 $scope.dataset = [{name: "test1"},{name: "test2"},{name: "test3"},{name: "test4"},{name: "test5"},{name: "test6"},{name: "test7"},{name: "test8"},{name: "test9"},{name: "test10"},{name: "test11"},{name: "test12"},{name: "test13"},{name: "test14"},{name: "test15"},{name: "test16"},{name: "test17"}]
}

指令：

     app.directive("customDirective", ["$compile", function ($compile) {    

    return {
        restrict: "A",
        scope:{
            dataset:'='
        },
        link: function (scope, element,attr) {
            var html="<li>";
            angular.forEach(scope.dataset,function(item,index){
                 if(index%6==0 && index!==0){
                html+="</li><li>";
                } 
                html+="<span>"+item.name+"</span><br/>";                    
            });
            html+="</li>";
            element.append($compile(html)(scope));
        }
    };
}]);

实例：http://jsfiddle.net/choroshin/PE5q7/2/