Question

我是全新的，只是尝试使用AngularJS框架。所以我不确定我采取的方法是最好/正确的方法。

我试图创建一个3级链式ajax填充选择框，除了几个问题之外它还有点工作。

我的实际代码使用工厂中的ajax，但为了小提琴，我只有一个控制器从数组中返回结果。

演示（使用数组，而不是ajax）： http://jsfiddle.net/xxwe1zu8/1/

问题：

第二级和第三级选择没有选择＆＃34;选择＆＃34;属性 - 即您选择的那个不会突出显示。
理想情况下，我希望通过ajax（或在此示例中使用数组）使用相同的角度函数（例如：getSubcategories = function（0,0）{）而不是硬编码，在页面加载时动态填充顶级类别。顶级类别的父级为0.

奖励：如果在选择子类别后返回了子子类别，是否只显示/可见第3个选择框？实际上，大多数子类别都没有子子类别。

var myAppModule = angular.module('myApp',[]);
myAppModule.controller('SearchCtrl', function($scope) {
var self = this;

self.subCategories = [];
self.getSubcategories = function(parent, level) {

    theCategories = [];

        angular.forEach(sub_category[parent], function(idx, val) {
             theCategories.push({id: val, name: idx});
        });


    self.subCategories[level] = theCategories;
}       
});

由于

Answer 1

我建议重新构建一个对象数组中的数据，并删除在这里似乎没用的标记。

var transport = [
    {
        name: "Cars",
        models: [
            {
                name: "Hatchback",
                variations: ["4 door", "5 door"]
            },
            {
                name: "Sedan",
                variations: ["4 door", "5 door"]
            },
            {
                name: "SUV",
                variations: ["Medium", "Large"]
            }
        ]
    },
 ...

这样可以在模板中创建更清晰的代码。我不是ControllerAs语法，因为$scope以任何方式注入。如果你刚刚开始学习AngularJS，这是一个更好的方法

    <select 
         ng-model="selectedType" 
         ng-options="t.name for t in transport"
         ng-change = "selectedModel=null;selectedVariation=null">
         <option value="">Select type</option>
    </select>

    <select 
         ng-model="selectedModel" 
         ng-options="model.name for model in selectedType.models"
         ng-change="selectedVariation=null" 
         ng-show="selectedType.models">
        <option value="">Select model</option>
    </select>

    <span ng-show="loading">Loading...</span>
    <select 
         ng-model="selectedVariation" 
         ng-options="variation for variation in variations"
         ng-show="variations && !loading">
        <option value="">Select variation</option>
    </select>

selectedType，selectedModel和selectedVariation在每个选择的$scope ng-model中隐式定义。目前在控制器中甚至没有提到它们。同时，ng-show中使用此属性隐藏与当前选择无关的select标记。
最后一个select（子子类别）演示了一种异步获取数据的方法。让我们想象您不会同时拥有完整的数据树，并在模型选择中从服务器获取变体。您可以在selectedModel的控制器中放置一个手表，如果它被选中（未清空），您将启动数据请求并更新响应变化

$scope.$watch('selectedModel', function(model){
    if(model){
        $scope.loading = true;
        //setTimeout imitates an ajax request
        setTimeout(function(){
            $scope.variations = model.variations;
            $scope.loading = false;
            $scope.$apply();
        }, 1000);
    }
})

Updated fiddle

链接使用Angular JS选择

1 个答案: