Question

我希望在我的页面中显示嵌套列表，使用非嵌套的ng-repeat和json对象<pre><br></pre> HTML代码

<div ng-app="myApp" ng-controller="controller">
    <ul ng-init="categories();">
        <li ng-repeat="cat in categories">
            {{cat.cat_name}}            
            <ul ng-show="cat[0]">
                <li ng-repeat="subCat in cat[0]">
                    {{subCat.cat_name}}
                </li>
            </ul>
        </li>
    </ul>
</div>

角度代码

var app = angular.module('myApp', []);
app.controller('controller', function($scope, $http) {   
$scope.categories = function(){
    $http({
        method: 'post',
        url: 'ajax.php',
        data: $.param({'type' : 'selectCategories'}),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .success(function(data){
        console.log(data);
        $scope.categories = data;
    })
    .error(function() {
        $scope.data = "error in fetching data";
    });
}}

ajax.php

if( isset($_POST['type']) && !empty(isset($_POST['type']) ) ){
    $type = $_POST['type'];     
    switch ($type) {
        case 'selectCategories':
            print json_encode($database->select("categories", "*"));//use medoo (The lightest PHP database framework)
            break;
    }
}

ajax.php页面的结果是

[Object { cat_id="1",  cat_name="a",  cat_parent="0"},Object { cat_id="2",  cat_name="aa",  cat_parent="1"},Object { cat_id="4",  cat_name="b",  cat_parent="0"},Object { cat_id="5",  cat_name="bb",  cat_parent="4"},Object { cat_id="3",  cat_name="ab",  cat_parent="1"}]

我想要显示列表，如下所示

一个
- AA
- AB
b
- BB

Answer 1

您可以使用lodash库来完成此任务。 https://lodash.com/

在您的成功函数中：

// this is your data
var data = [ { cat_id:1,  cat_name:"a",  cat_parent:0}, { cat_id:2,  cat_name:"aa",  cat_parent:1}, { cat_id:4,  cat_name:"b",  cat_parent:0}, { cat_id:5,  cat_name:"bb",  cat_parent:4}, { cat_id:3,  cat_name:"ab",  cat_parent:1}];


$scope.list = [];

var i = 0 ;
while($scope.list.length<=0){
    // gets the first 2 items in the tree
    $scope.list = _.filter(data, ['cat_parent', i]);

    if ($scope.list.length>0) {
        for (var i = 0; i < $scope.list.length; i++) {
            $scope.list[i].list = _.filter(data,['cat_parent', list[i].cat_id]);
        }
    }
    i++;
}

console.log($scope.list);

这仅适用于类别树中的2个级别，但我认为这是一个良好的开端。：）

干杯！

从json打印嵌套列表，该列表未嵌入ng-repeat

1 个答案: