javascript - 使用相同的 ng-model 从 AngularJS 中的数组中选择下拉选项

Question

我有一个使用 AngularJS、Monaca 和 OnsenUI 开发的跨平台应用程序。

我的观点之一是大表单，用户可以在其中选择多个下拉选择值。对于表单的大部分内容，选项是“是/否”下拉选择选项。

我在 app.js 中创建了一个数组来保存是/否选项来填充下拉选择值，如下所示。

$scope.OptionYesNo = [{
    yesnooptiondesc: "No",
    yesnooptionid: "0"
}, {
    yesnooptiondesc: "Yes",
    yesnooptionid: "1"
}];

然后，为了填充我的下拉选择选项，我在 View 中执行以下操作:

<ons-row>
    <ons-col>
        Option 1
        <select id="" name="" ng-model="OptionYesNo.yesnooptionid" ng-options="yesNoOption.yesnooptionid as yesNoOption.yesnooptiondesc for yesNoOption in OptionYesNo" ng-change="changedValue(OptionYesNo.yesnooptionid, 'OptionOne')">
            <option value="" label="-- Please Select --"></option>
        </select>
    </ons-col>
</ons-row>

然后在我的 app.js 中，我处理 changedValue(...) 函数中所选值选项的更改，如下所示。我向函数传递了一个标识符，以及将值保存到哪个数组的指示符(由于不相关而省略)

$scope.changedValue = function (selectedValue, identifier) {
    switch (identifier) {
        case "OptionOne":
            $scope.optionOneArray.push(selectedValue);
            break;

        case "OptionTwo":
            $scope.optionTwoArray = selectedValue;
            break;
    }
}

问题是当我尝试使用与上面相同的方法添加第二个“是/否”选项时，例如

<ons-row>
    <ons-col>
        Option 2
        <select id="" name="" ng-model="OptionYesNo.yesnooptionid" ng-options="yesNoOption.yesnooptionid as yesNoOption.yesnooptiondesc for yesNoOption in OptionYesNo" ng-change="changedValue(OptionYesNo.yesnooptionid, 'OptionTwo')">
            <option value="" label="-- Please Select --"></option>
        </select>
    </ons-col>
</ons-row>

每当我更改一个选择值时，另一个选择值也会更改，因为它们使用相同的 ng-model。我该如何应对这种情况？我不想(或者认为我必须)创建一个 $scope.OptionOneYesNo = [{ ... }]; $scope.Option每个选择下拉菜单有两个YesNo = [{ ... }];，因为可能有 20 多个选择下拉菜单。

Answer 1

您需要在下拉 ListView 中创建不同的 ng-model。不要在所有下拉菜单中使用相同的模型。您仍然可以在每个下拉列表中迭代 $scope.optionsyesno 中的选项。这应该可以解决问题。