【问题标题】:Dropdown value is not binding with associative array下拉值未与关联数组绑定
【发布时间】:2018-02-06 00:39:58
【问题描述】:

我有一个如下所示的关联数组,我想将其与我的下拉列表绑定:

{
        "Item1": [
          {
            "title": "Item1",
            "choices": [
              "Egg",
              "burger",
            ]
          }
        ],
        "Item2": [
          {
            "title": "Item2",
            "choices": [
              "Pizza",
              "Rice",
            ]
          }
        ]
     }

我正在尝试基于此关联数组绑定下拉菜单,但问题是它显示为 object object

我想在下拉列表中显示每个项目的标题,如下所示:

Item1
Item2

我试图参考下面的 SO 问题,但没有成功:

key-value pairs in ng-options

Angularjs ng-options with an array of key-pair

var app = angular.module("myApp", []);
app.controller("MyController", function ($scope) {
    $scope.item=
    {
        "Item1": [
          {
            "title": "Item1",
            "choices": [
              "Egg",
              "burger",
            ]
          }
        ],
        "Item2": [
          {
            "title": "Item2",
            "choices": [
              "Pizza",
              "Rice",
            ]
          }
        ]
     }

 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <ul ng-app="myApp" ng-controller="MyController">
     <select ng-model="myItem.title" ng-options="key as value for (key , value) in item">
           <option value="">Select Items</option>
     </select>
</ul>

【问题讨论】:

  • 您的项目详细信息(带有标题、选项的对象)是否需要包装在数组中?没有那个数组包装器会更容易解析。
  • @jdubjdub 实际上我有各种类型的项目,如法语、意大利语、中文,其中每个项目都有一些选择,即我将这些项目作为关联数组

标签: javascript angularjs


【解决方案1】:

应该是这样的:

   ng-options="value as key for (key , value) in item">

var app = angular.module("myApp", []);
app.controller("MyController", function ($scope) {

    $scope.item=
    {
        "Item1": [
          {
            "title": "Item1",
            "choices": [
              "Egg",
              "burger",
            ]
          }
        ],
        "Item2": [
          {
            "title": "Item2",
            "choices": [
              "Pizza",
              "Rice",
            ]
          }
        ]
     }

 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <ul ng-app="myApp" ng-controller="MyController">
     <select ng-model="myItem.title" ng-options="value as key for (key , value) in item">
           <option value="">Select Items</option>
     </select>
     
     {{myItem.title}}
</ul>

【讨论】:

  • 为什么 value[0]?这不会总是只选择我的关联数组的第一项吗??
  • 不清楚期权价值是多少?查看更新的答案。
  • 赞成您为帮助我所做的努力。请您向我解释一下这个关联数组的 ng-options :)
  • 当然。只是我不知道你想要ng-model 什么?价值对我来说是模糊的。
  • 所以你应该试试这个value[0].title as key ...
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-11-05
相关资源
最近更新 更多