Question

我想要一个指令，它将根据类别层次结构名称数组呈现按钮列表。如果一个按钮没有更多的孩子，或者如果它有孩子，则会选择该类别将深入到下一个级别。

I / P：

[{name：electronics''}，{name：'hobbies'}，{name：'electronics | computers'}，{name：'electronics | computers | software'}，{name：'electronics | headphones' }]

上面的阵列将首先呈现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);
                        }
                    }
                });
            }

基于数据的分层列表按钮

1 个答案: