Angularjs.如何使用选择框连接表单中的字段.更改选择应更改字段

Angularjs. How to connected fields in form with selectbox. Changing select should change fields

本文关键字：字段 选择 表单 何使用 连接 Angularjs      更新时间：2023-09-26

我正在尝试制作输入形式。我有选项选择。选择其中一个选项后，我希望根据所选选项填充其他三个字段。

例如：

如果用户选择选项 1 3，则其他字段中应包含文本 1_1、1_2、1_3。如果用户选择选项 2 3，则其他字段中应包含文本 2_1、2_2、2_3。

最好的方法是什么？

我发现这种方式：

在范围内创建变量

$scope.select_options = [
    {"name": "Option1",
        "field1": "1_1",
        "field2": "1_2",
        "field3": "1_3"},
    {"name": "Option2",
        "field1": "2_1",
        "field2": "2_2",
        "field3": "2_3"},
    {"name": "Option3",
        "field1": "3_1",
        "field2": "3_2",
        "field3": "3_3"}
];

这是 HTML 代码

    <select ng-model="opt_select"
        ng-options="option as option.name for option in select_options"
        ng-init="opt_select = opt_select || select_options[0]" id="well"
        name="company" class="input"></select>
<input id="field1" name="field1" placeholder="" class="input" type="text"
       ng-model="opt_select.field1">
<input id="field3" name="field2" placeholder="" class="input" type="text"
       ng-model="opt_select.field2">
<input id="field3" name="field3" placeholder="" class="input" type="text"
       ng-model="opt_select.field3">

正确吗？

是的。这是它的小提琴：小提琴

但是，当然，因为它是双向绑定到您的视图的，因此如果用户编辑输入框，您的field将保存在您的select_options中。也就是说，如果用户通过在输入框中编辑Option3 field1更改为3_1_new，则当用户选择另一个选项并选择Option3时，它仍然会3_1_new。如果这不适合您的用例，您必须考虑其他事情。

除此之外，对于最佳实践和其他代码审查，您应该发布到 https://codereview.stackexchange.com/

相关文章：