angularjs ng-options 从嵌套的 json 数组中选择答案

【问题标题】：angularjs ng-options select from nested json arrayangularjs ng-options 从嵌套的 json 数组中选择
【发布时间】：2017-09-28 01:14:07
【问题描述】：

我在我的范围内定义了一个 json，例如

   $scope.People = [  
    {  
          "firstName":"John",
          "lastName":"Doe",
          "Choices":[  
             {  
                "Name":"Dinner",
                "Options":[  
                   {  
                      "Name":"Fish",
                      "ID":1
                   },
                   {  
                      "Name":"Chicken",
                      "ID":2
                   },
                   {  
                      "Name":"Beef",
                      "ID":3
                   }
                ]
             },
             {  
                "Name":"Lunch",
                "Options":[  
                   {  
                      "Name":"Macaroni",
                      "ID":1
                   },
                   {  
                      "Name":"PB&J",
                      "ID":2
                   },
                   {  
                      "Name":"Fish",
                      "ID":3
                   }
                ]
             }
          ]
       },
       {  
          "firstName":"Jane",
          "lastName":"Doe"
       }
    ];

想要使用 angularjs 在一个下拉框中列出所有选项名称（不重复）。

掉落选项的值将包括鱼、鸡肉、牛肉、通心粉、PB&J

<div ng-app="myApp" ng-controller="SomeController">
     <select ng-model="people.Choices.Name"                 
           ng-options="people.Choices.Name for people in People"></select>
</div>

但这不起作用。

感谢任何见解。

【问题讨论】：

people != People，也不是有效的 JSON。 Name 和 ID 需要引号。这是您的有效 JSON：pastie.org/9418572
感谢编辑。这只是拼写错误。 People in People 表示 People 范围内的每个实体。
] 后面还有一个额外的,
复制了你的 JSON。谢谢。
mkay，我正在做小提琴

标签： angularjs ng-options

【解决方案1】：

<select>
<option ng-repeat-start="p in people" ng-bind="p.firstName"></option>
<option ng-repeat-end ng-repeat="choice in p.choices" ng-bind="choice.name"></option>
</select>

http://plnkr.co/edit/2vj4PK?p=preview

【讨论】：

【解决方案2】：

我正在努力让它变得更好，但是像这样吗？ Plnkr这是一个开始！

 <div ng-repeat="people in People">
     <div ng-repeat="choice in people.Choices">
         <select ng-model="choice.SelectedOption"                 
           ng-options="option.Name for option in choice.Options"></select>
    </div>
 </div>

修订版 2。现在有选择！ Pnkr 2

【讨论】：

不。我想要一个下拉框中的所有选项。

【解决方案3】：

好的，我认为您必须对 JSON 数组进行一些预处理并以这种方式对其进行过滤。这是最简单的方法

HTML

<body ng-app="TestApp">
    <div ng-controller="TestController">
        <select ng-model="blah"
            ng-options="opt for opt in options">                
        </select>        
    </div>
</body>

var app = angular.module('TestApp',[]);

app.controller('TestController', function($scope)
{
    $scope.options = [];
    $scope.people = [
      {
        "firstName": "John",
        "lastName": "Doe",
        "choices": [
          {
            "name": "Dinner",
            "options": [
              {
                "name": "Fish",
                "id": 1
              },
              {
                "name": "Chicken",
                "id": 2
              },
              {
                "name": "Beef",
                "id": 3
              }
            ],
            "selectedOption": {
              "name": "Chicken",
              "id": 2
            }
          },
          {
            "name": "Lunch",
            "options": [
              {
                "name": "Macaroni",
                "id": 1
              },
              {
                "name": "PB&J",
                "id": 2
              },
              {
                "name": "Fish",
                "id": 3
              }
            ],
            "selectedOption": ""
          }
        ]
      },
      {
        "firstName": "Jane",
        "lastName": "Doe"
      }
    ];
    for (var a = 0; a < $scope.people.length; a++)
    {
        if ($scope.people[a].choices != undefined)
        {
            for (var b = 0; b < $scope.people[a].choices.length; b++)
            {
                for (var c = 0; c < $scope.people[a].choices[b].options.length; c++)
                {
                    var target = $scope.people[a].choices[b].options[c].name;
                    if ($scope.options.indexOf(target) == -1) $scope.options.push(target);
                }
            }           
        }
    }
});

http://jsfiddle.net/HX6T3/

我还将一些大写字母改为全部小写字母。如果你愿意，你可以把它改回来。

【讨论】：

这似乎是一种迂回的方式。我们不能不做预处理吗？
这也是我遇到的问题。由于选项列表来自数组中的数组中的多个数组，因此您正在尝试让角度为您清理 json。最好的方法是将所有选项定义在一个对象/数组中，角度或其他任何东西都可以从中调用。然后，只需将所做的选择分配给个人 people.choice.dinner。

【解决方案4】：

我试图做同样的事情并找到了另一种解决方案，通过使用 ng-if="false" 或 style="display: none" 和 ng-repeat-start/end 来显示名称。基于@user730009 的回答。

<div ng-repeat="people in People">
<select>
    <option ng-repeat-start="choice in people.Choices" ng-if="false"></option>
    <option ng-repeat-end ng-repeat="option in choice.Options" value="{{ option.name }}">{{ option.name }}</option>
</select>
</div>

这为我们提供了一个带有以下选项的选择框。

鱼
奇辰
牛肉
等

【讨论】：