因爲angular ng-repeat只能寫在標籤上 循環對象的對象時遇到的問題及解決方法

    對象數據結構

$scope.obj = {
    "section1":{
        "category1":{
            "key1":"value1",
            "key2":"value2"
        },
        "category2":{
            "key1":"value3",
            "key2":"value4"
        }
    },
    "section2":{
        "category3":{
            "key1":"value5",
            "key2":"value6"
        }
    }
    ...
};

    

    ng-repeat循環時的結構

<ul ng-repeat="(key,value) in obj">
    <li ng-repeat="(subkey,subValue) in value" >
        {{key}}
        {{subkey}}
        {{subValue.key1}}
        {{subValue.key2}}            
    </li>
</ul>

    

    這樣循環輸出的結果

<ul>
    <li>
        section1
        category1
        value1
        value2
    </li>
    <li>
        section1
        category2
        value3
        value4
    </li>
</ul>
<ul>
    <li>
        section2
        category3
        value5
        value6
    </li>
</ul>

而我但願的結果是li在一個ul中循環，這樣能夠避免當li的個數爲奇數時，產生的佈局問題。

最後解決的方法是改造對象,將它生成爲一個新的數組進行循環。

$scope.buildData = function(){
    var newArr = [];
    angular.forEach($scope.obj,function(value,key){
         angular.forEach(value,function(subvalue,subkey){
             newArr.push({
                 "section": key,
                 "category": subkey,
                 "key1":subvalue["key1"],
                 "key2":subvalue["key2"]
             }) 
         });
    });
    return newArr;
};
$scope.newObj =  $scope.buildData();

//新的循環方法
<ul>
    <li ng-repeat="data in newObj ">
        {{data.section}}
        {{data.category}}
        {{data.key1}}
        {{data.key2}}
    </li>
</ul>