Question

我有一个这样的数组 - 注意“选项”数组不包括[];这是服务器通过MVC返回的数据 - 最初我得到的数组如下面的注释代码：

//var initialData = @Html.Raw(Json.Encode(Model.FieldList));):

var initialData = [{ "DisplayName": "Service Status",
"Options": { "123": "Active", "127": "Scrapped", "121": "Inactive" },
"Value": "123"
        }];

我想将Options中的值放入一个标签为“Active”，“Scrapped”，“Inactive”的下拉列表中，每个映射到数组Options中列出的相应数值。

我想在该下拉列表中预先选择与“123”对应的值“Active”。我的下拉列表的标签是“服务状态”。

这是我到目前为止的代码。但它只显示我的服务状态下拉列表，其中包含1个元素Active。如何将其他2个元素添加到下拉列表中？

如果你可以帮助我，我会非常感激。谢谢！

<script type="text/javascript">
    var viewModel;
    $(document).ready(function() {
           var initialData = [{ "DisplayName": "Service Status",
                  "Options": { "123": "Active", "127": "Scrapped", "121": "Inactive" },
                  "Value": "123"
           }];
        viewModel = { fields: ko.observableArray(initialData) };
        ko.applyBindings(viewModel);
    });
</script>

<span data-bind="foreach: viewModel.fields">
<span data-bind="text:DisplayName"></span>
<select data-bind="options: Options,                                
                         optionsValue: Value"></select>
</span>

Answer 1

您可能希望将包含值的对象映射到可以使用选项绑定的数组。

类似的东西：

var optionsFromServer = data[0].Options,
    options = [];

for (var prop in optionsFromServer) {
    if (optionsFromServer.hasOwnProperty(prop)) {
        options.push({ id: prop, text: optionsFromServer[prop] });   
    }
}

然后，您可以绑定这个新的选项数组，如：

<select data-bind="options: options, optionsValue: 'id', optionsText: 'text'"></select>

如何使用KO显示嵌套数组的下拉列表值

1 个答案: