【问题标题】:Creating a series of dropdown menus based on an Object with key: [array of dropdown options] pairs?基于带有键的对象创建一系列下拉菜单:[下拉选项数组]对?
【发布时间】:2016-08-07 07:03:25
【问题描述】:

在过去的几天里,我在这个问题上遇到了很多麻烦。基本上,我正在尝试基于从数据库返回的 JSON 来创建一系列下拉菜单。两天前我能够让它正常工作,但我们只是重写了我们的后端代码以返回不同格式的 JSON,我必须重写很多东西才能让它工作。我们名字 JSON 的格式是这样的:

provisions: {
   NAME OF DROPDOWN MENU1: [VALUE1, VALUE2, VALUE3, ..],
   NAME OF DROPDOWN MENU2: [VALUE1, VALUE2, VALUE3, ..],
   NAME OF DROPDOWN MENU3: [VALUE1, VALUE2, VALUE3, ..]
}

基于该 JSON,我想创建 3 个下拉菜单,其中包含相关值。我还希望能够显示服务器返回的任何先前保存的数据(例如,如果用户在第一个下拉列表中选择值 2 并保存页面,则第一个下拉列表将在他们下次访问该页面时显示值 2 )。

这是我目前必须尝试显示下拉菜单的 HTML:

<form class="form-horizontal" ng-controller="GamePreferenceCtrl">
    <div ng-repeat="(name, section) in gameConfigs">
        <label ng-bind="name"></label>
        <select class="form-control" ng-model="formData.settings[$index].value" ng-change="dropdownItemClicked(name, formData.settings[$index].value)">
            <option value="" disabled="disabled">---Please Select Option---</option>
            <option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value"></option>
        </select>
    </div>
    <div class="col-md-12" ng-include="gametemp"></div>
    <div class="row">
        <div class="hr-line-dashed"></div>
        <div class="text-center col-md-12 padding-15">
            <button class="btn btn-primary btn-lg" ng-click="saveGameSetting()" formnovalidate translate>
                <i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i>&nbsp;Save
            </button>
        </div>
    </div>
</form>

所写的方式将显示下拉菜单,其上方带有适当的名称,但下拉菜单中的每个选项都是空白的。对此的任何帮助表示赞赏。谢谢你。

【问题讨论】:

  • provisions 表示gameConfigs 还是什么?另外,如果你能发布一个有用的object/array..
  • 是的,gameConfigs 是我在控制器中创建的一个对象。我的控制器设置为检查是否有从 API 返回的配置对象,如果有,则创建一个与配置对象完全相同的结构的 gameConfigs 对象。我不知道如何更清楚对象数组的结构,除了类似:provisions: { food: ["burger", "burrito"],drink: ["coke", "sprite", "mountain露”],甜点:[“圣代”]}

标签: javascript angularjs drop-down-menu ng-repeat ng-options


【解决方案1】:

您是否尝试过这样做?

&lt;option ng-repeat="item in section" value="{{item.value}}"&gt;{{item.value}}&lt;/option&gt;

我不确定ng-bind 是否可以访问item.value,因为ng-repeat 在同一个元素上,所以可能会更好。

【讨论】:

  • 天哪。我想我一直盯着这个看太多了,以至于我的大脑变成了糊状。我刚刚意识到我需要将值更改为“{{item”}} 而不是“{{item.value}}”。选项现在正确显示在下拉菜单中。谢谢你指出这一点。现在,对于真正困难的部分,使以前保存的值默认显示在下拉菜单中。我也很乐意接受任何帮助。
  • @amacdonald 也许label="item.value" 也可以。但我建议你使用ngOptions 而不是ngRepeat
  • 之前保存的值是如何保存的?使用ng-selected="expression" 应该不难做到
  • 我在 select 类上设置了一个 ng-change,用于监视用户单击的名称和值,这就是 ng-model 设置为 formData.settings[$index.value 的原因。然后它创建一个对象,该对象以{NAME OF DROPDOWN MENU: VALUE} 的形式发送到API,并以{NUMERIC KEY: {NAME OF DROPDOWN MENU, VALUE}} 等形式响应。我对 ng-selected 没有任何经验。
猜你喜欢
  • 2017-05-08
  • 1970-01-01
  • 2016-01-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多