javascript - 两个下拉过滤器。第一个确定第二个中的信息

Question

虽然我已经花了几个小时尝试，但我不确定如何构建它。我的代码似乎有些接近，但我无法将我的选择从 HTML 传递回 Controller 。

我的 Angular 代码:

 var Categories = Parse.Object.extend("bizCategories");

        $scope.categories = [
            {category: "Food and Drink"},
            {category: "Healthcare"},
            {category: "Recreation"},
            {category: "Service"},
            {category: "Shops"},
            {category: "Travel"}
        ]

        $scope.setPrimary = function (category) {
            $scope.offer.primary = category;
            $scope.secondaryCategories(category);
        };

        $scope.secondaryCategories = function(category){
            var Secondary = new Parse.Query(Categories);
            Secondary.limit(1000);
            Secondary.find({
                success:function(list){
                    $scope.SecondaryCategories = _.uniq(_.filter(_.map(list, function(item){
                        return{primary: item.get('secondary')
                        }}
                    )),'primary',true)
                    console.log($scope.SecondaryCategories);
                },
                error: function(error){alert("A mistake was made.");
                }
            })
        }

我的 html:

  <select id= 'primary' ng-model="offer.primary" ng-options="XXX.category for XXX in categories"
                ng-click= setPrimary(category)>
            <option value="">Primary Business Category</option>
        </select>

        <select id= 'secondary' ng-model="offer.secondary" ng-disabled="!offer.primary"
                ng-options="XXX.category for XXX in SecondaryCategories" ng-click="setSecondary('XXX.category')">
            <option value="">Secondary Business Category</option>
        </select>

您会看到我在我的 html 中为 ng-options 选择了 XXX。我之所以选择它，是因为从教程中我可以看出，将其特别命名的目的是任意的，因此我将此 XXX 设为与此无关。此外，我需要来自第一个下拉列表的信息以传递给第二个下拉列表(类别)的函数，但它显示为未定义。

数据来源:

Answer 1

看起来您正在尝试在选择 1 时设置其他下拉菜单。您应该使用 ng-change 而不是 ng-click。

尝试:-

    <select id= 'primary' ng-model="offer.primary" ng-options="XXX.category for XXX in categories"
            ng-change= setPrimary(category)>
        <option value="">Primary Business Category</option>
    </select>

    <select id= 'secondary' ng-model="offer.secondary" ng-disabled="!offer.primary"
            ng-options="XXX.category for XXX in SecondaryCategories" ng-change="setSecondary('XXX.category')">
        <option value="">Secondary Business Category</option>
    </select>

由于您的 ng-model 已经绑定(bind)到 offer.primary ，您可以避免执行 $scope.offer.primary = category;因为 ng-model 已经设置好了。