基于数据的分层列表按钮

Question

我想要一个指令，它将呈现一个基于类别层次名称数组的按钮列表。一个按钮将选择类别，如果它没有更多的孩子，或者如果它有孩子，将向下钻到下一个级别。

i/p：

{名称:电子“}”}，{名称：“兴趣爱好”}，{名称：“电子计算机”}，{名称：“电子计算机类软件”}，{名称：“电子产品类耳机”}}

上面的数组将首先呈现2个按钮，单击电子按钮将呈现新的按钮:计算机和耳机等等。

我试过：

  controller: ['$scope', function($scope) {
    $scope.category= [];
    $scope.init = function() {
        for(var index=0; index<$scope.option.data.length; index++) {
            if($scope.option.data[index].name.indexOf("|") === -1){
                $scope.category.push($scope.option.data[index]);
            }
        }
    }
    $scope.init();

    $scope.drillDown=function(value){
        // console.log(value);
        var count = 0;
        var arrVal=[];
        arrVal=value
         $scope.category= [];

         for(var index=0; index<$scope.option.data.length; index++) {

            if($scope.option.data[index].name.indexOf(value + "|") !== -1){

                for(var i=0; i< $scope.option.data[index].name.length; i++){    
                if($scope.option.data[index].name[i] == '|'){
                    count+=1;
                    }
                }
                if(count === 1){

                         $scope.category.push($scope.option.data[index]);
                    }     

                 count = 0;
        }


        }
    }
}]

Answer 1

请检查下面的代码段：

        $scope.drillDown = function(event){

                $scope.delimiter = '|';  
                $scope.buttons = [];
                $scope.delimiterCount = (event.n.split($scope.delimiter).length - 1);
                $scope.flagAll = false;
                angular.forEach($scope.option.data,function(value,index){
                    if($scope.option.data[index].name.indexOf(event.n+$scope.delimiter) !== -1){
                        $scope.splitData = $scope.option.data[index].name.split($scope.delimiter);
                        if($scope.flagAll == false){
                            $scope.buttons.push("All "+$scope.splitData[$scope.delimiterCount]);
                            $scope.flagAll = true;
                        }
                        if(($scope.splitData.length-1) > ($scope.delimiterCount+1)){
                            //$scope.buttons.push("All "+$scope.splitData[$scope.delimiterCount]);
                        }
                        else{
                            $scope.buttons.push($scope.option.data[index].name);
                        }
                    }
                });
            }