基于数据的分层列表按钮

Hierarchical list buttons based on data

本文关键字：分层列表按钮数据于数据更新时间：2023-09-26

我想要一个指令，它将根据类别层次名称数组呈现按钮列表。如果类别没有更多的子类别，按钮将选择该类别，如果它有子类别，则将向下钻取到下一层。

我/p

:

[{name: electronics "}， {name: '爱好'}，{name: 'electronics|computers'}， {name: 'electronics|computers|software'}， {name: 'electronics|耳机'}]

上面的数组将首先呈现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;
        }

        }
    }
}]

检查下面的代码片段:

        $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);
                        }
                    }
                });
            }