两个下拉过滤器。第一个确定第二个中的信息
Two dropdown filters. The first determines the info in the second
虽然我已经花了几个小时尝试,但我不确定如何构建它。我的代码似乎有点接近,但我无法将我的选择从 HTML 传回控制器。
我的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 设为与此无关。此外,我需要来自第一个下拉列表的信息以传递给第二个下拉列表(类别)的函数,但它显示为未定义。
数据来源:
看起来您正试图在选择 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
已经绑定到 offer.primary
,你可以避免做 $scope.offer.primary = category;
因为 ng-model 已经设置好了。
虽然我已经花了几个小时尝试,但我不确定如何构建它。我的代码似乎有点接近,但我无法将我的选择从 HTML 传回控制器。
我的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 设为与此无关。此外,我需要来自第一个下拉列表的信息以传递给第二个下拉列表(类别)的函数,但它显示为未定义。
数据来源:
看起来您正试图在选择 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
已经绑定到 offer.primary
,你可以避免做 $scope.offer.primary = category;
因为 ng-model 已经设置好了。