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

标签 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>    

这是我来自 Controller 的代码:

$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;};

最佳答案

您的第二个 if 语句有问题

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

从第一个 if 语句中您已经知道 $scope.firstType.formType != 'inquiry' 为 true,这意味着该 if 语句始终为 true,并且永远不会到达最后一个 if 语句。

最后一个如果仍然不起作用,您需要将 secondaryList 中的一个值分配给 $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;
    }
}

关于javascript - 如何使用 ng-options 在 angularjs 中自动选择另一个选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25410479/

相关文章:

php - 使用 Angular.js 的 HTTP POST

javascript - "Cannot set property ' 在 ng-change 复选框上选中 ' of undefined"

python - 使用 Python Flask、AngularJS、测试/生产目录和服务请求

javascript - ng-options - 传递键而不是值

angularjs - 为选择选项组提供样式

javascript - 如何编写模块化客户端 Javascript?

javascript - EXTjs 从一个 Controller 访问另一个 Controller 中的数据集

javascript - 使用 ng-options 生成下拉列表时,如何设置所选选项?

javascript - 当我调用 this.constructor.superclass.someMethod 时,超出最大调用堆栈大小会引发异常

javascript - 删除关闭按钮(右上角的 X)- 在使用 dojo 创建的对话框中?