如何使用ng-options在angularjs中自动选择另一个选项

时间:2014-08-20 17:01:03

标签: javascript angularjs ng-options 2-way-object-databinding angularjs-ng-model

我有两个选择选项,我正在使用ng-options从json文件中获取数据。我担心的是如果在第一次选择中选择了一个值,我需要在另一个选择中自动选择一个相应的值。 我可以在下拉列表中填充数据。但我无法连接这两个。请帮忙。

下面是我的第一个选择代码:

<select ng-model="firstType"
                            ng-change="firstTypeChange()"
                            ng-options="firstValue as firstValue.value group by firstValue.group for firstValue in firstList" tabindex="1">
                            <option value=""></option>
                    </select>    

第二个选择如下:

<select ng-model="secondType"
                            ng-change="secondTypeChange()"
                            ng-options="secondValue as secondValue.value group by secondValue.group for secondValue in secondList"
                            tabindex="2">
                            <option value=""></option>
                    </select>    

这是我来自控制器的代码:

$scope.firstType = "";
$scope.secondType = "";
$scope.isFirstTypeShow = true;
$scope.isSecondTypeShow = true;

$scope.firstTypeChange = function() {
$scope.formType = $scope.firstType.formType;
 if ($scope.firstType.formType == 'inquiry') {
   $scope.isSecondTypeShow = false;
 } else if ($scope.firstType.formType != 'inquiry' || $scope.firstType.formType == null) {
   $scope.isSecondTypeShow = true;
 } else if ($scope.formType == 'known'){
   $scope.secondType.formType = 'existing';
 }
}
$scope.secondTypeChange = function() { $scope.secondFormType = $scope.secondType.formType;};

2 个答案:

答案 0 :(得分:1)

您的第二个if语句

有问题
if ($scope.firstType.formType != 'inquiry' || $scope.firstType.formType == null) {

你已经从第一个if语句中知道这个$ scope.firstType.formType!='inquiry'是真的,这意味着这个if语句总是为true而且永远不会到达最后一个if语句。

最后一个如果仍然不起作用,你需要从secondList分配一个值到$ scope.secondType来选择值。 请在此处查看JSFiddle

$scope.firstTypeChange = function () {
    $scope.formType = $scope.firstType.value;   
    if ($scope.formType == 'inquiry') {
        $scope.isSecondTypeShow = false;
    } else if ($scope.formType == null) {
        $scope.isSecondTypeShow = true;
    }
    else if ($scope.formType == 'known') {
        $scope.secondType = $filter('filter')($scope.secondList, {value:'existing'})[0];
        $scope.isSecondTypeShow = true;
    }
    else {
        $scope.isSecondTypeShow = true;
    }
}

答案 1 :(得分:0)

尝试在第一个选择项目上添加监视。然后根据第一个项目中选择的值设置第二个选定项目的默认值。如果你为这个

举例说明,请告诉我