Javascript方。

Question

我在页面上有下拉选项。

代码看起来像

<td>
    <ui-select ng-model="user_profile.gender" required="true">
    <ui-select-match > {{$select.selected.name}} </ui-select-match>
    <ui-select-choices repeat="option in selectOptions.gender | propsFilter: {name: $select.search} ">
    <div ng-bind-html="option.name | highlight: $select.search"></div>
    </ui-select-choices>
    </ui-select>
</td>

Javascript方。

var selectOptions = {
    gender: [{
        id: 0,
        name: "女"
    }, {
        id: 1,
        name: "男"
    }],
    ..
}

但是，数据库中字段的值是INTEGER类型。

0女性，1男性

如果没有太多的硬编码程序，如何将性别值从数据库加载到页面。

因为我能想到像这样的愚蠢行为

用于加载页面

从API加载性别值。
设置性别下拉列表的选定值

保存更改

提取性别下拉列表的选定值
将PUT请求发送到API以保存更改

哇，它应该涉及很多实现代码的逻辑。

是否有任何优雅的方法可以在Angular.js或任何javascript库上实现此目的来处理转换。

谢谢

Answer 1

如果您唯一需要关注的是重复ui-select中的Id值，那么您只需要更改：

<ui-select-choices repeat="option in selectOptions.gender | propsFilter: {name: $select.search} ">

为：

<ui-select-choices repeat="option.id as option in selectOptions.gender | propsFilter: {name: $select.search} ">

原因是你现在只是说我想将整个模型用作选定的值。通过声明“options.id as option”说我会给你在重复中使用的整个对象，但是当选择某些东西时，我会将id设置为所选值，并将其用作设置值的比较。

快速示例位于https://plnkr.co/edit/G8FHfauHd2auSYdRUlDB?p=preview

在更好的实践中保存和加载FORM值

Javascript方。

1 个答案: