我有两个级联下拉列表。当我选择第一个选项时,第二个下拉列表会相应更改。当我更改第一个选项时,第二个下拉列表中的选项似乎没有变化,但是当您在第二个下拉列表中单击过时选项时,UI上会显示更改,然后它们将成为正确的选项。
HTML:
<select id= 'primary' ng-model="offer.primary" ng-options="XXX.primary for XXX in categories"
ng-change= setPrimary("offer.primary")>
<option value="">Primary Business Category</option>
</select>
<select id= 'secondary' ng-model="offer.secondary" ng-disabled="!offer.primary"
ng-options="XXX for XXX in SecondaryCategories" ng-change=setSecondary()>
<option value="">Secondary Business Category</option>
</select>
JS
$scope.setPrimary = function () {
$scope.secondaryCategories();
};
$scope.setSecondary = function () {
}
$scope.categories = [
{primary: "Food and Drink"},
{primary: "Healthcare"},
{primary: "Recreation"},
{primary: "Service"},
{primary: "Shops"},
{primary: "Travel"}
]
$scope.secondaryCategories = function(){
var Secondary = new Parse.Query(Categories);
Secondary.limit(1000);
Secondary.equalTo('primary', $scope.offer.primary['primary']);
console.log('log3:' +" "+ $scope.offer.primary['primary']);
Secondary.find({
success:function(list){
$scope.SecondaryCategories = _.filter(_.uniq(_.map(list, function(item){//this function is an iteratee and item is the key word!
return item.get('secondary')
}
),true))
console.log($scope.SecondaryCategories);
},
error: function(error){alert("A mistake was made.");
}
})
}
我的数据源是一个简单的集合,其中primary位于列中,可能没有次要关系,或者可能有许多次要关系,而secondary位于其自己的列中,并且始终具有主要关系。