Question

我正在尝试在Ionic中创建一个表单，包括下拉列表。以前，我有以下代码：

            <label class="item item-input item-select">
                <span class="input-label">* Age</span>
                <select ng-model="data.child1.age" required>
                    <option ng-value="7">Year 7 (11-12)</option>
                    <option ng-value="8">Year 8 (12-13)</option>
                    <option ng-value="9">Year 9 (13-14)</option>
                    <option ng-value="10">Year 10 (14-15)</option>
                    <option ng-value="11">Year 11 (15-16)</option>
                    <option ng-value="12">Year 12 (16-17)</option>
                    <option ng-value="13">Year 13 (17-18)</option>
                </select>
            </label>

这个问题是当我加载以前保存的数据（来自数据库）时，视图不会更新以匹配模型。

所以，经过一些研究后，我试了一下：

            <label class="item item-input item-select">
                <span class="input-label">* Age</span>
                <select ng-model="data.child1.age" ng-options="item.id as item.label for item in ageOptions" required></select>
            </label>

ageOptions的样子如下：

             $scope.ageOptions = [
                {id: 7, label: "Year 7 (11-12)"},
                {id: 8, label: "Year 8 (12-13)"},
                {id: 9, label: "Year 9 (13-14)"},
                {id: 10, label: "Year 10 (14-15)"},
                {id: 11, label: "Year 11 (15-16)"},
                {id: 12, label: "Year 12 (16-17)"},
                {id: 13, label: "Year 13 (17-18)"}
             ]

然而，尽管视图现在更新并且与模型匹配，但我实际上无法更改所选选项！更具体地说，单击表单元素实际上并没有做任何事情（即打开下拉框）。

我已经环顾四周但却找不到任何相关内容。谢谢你的帮助！

离子表格不能在选择时更改选项

0 个答案: