在Angular JS中选择选项绑定JSON数组

Question

我正在使用角度js中的选择框。 我需要将数据绑定到json的选择框，如何在角的选择框内使用数组填充json。 我有以下代码。

的HTML

  <div ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectedName" ng-options="x.names.name for x in names">
        </select>
  </div>

JS

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
       $scope.names = {
          "jobs": [
      {
        "Software": [
          {
            "name": "Developer",
            "displayName": "App Developer"
          },
          {
            "name": "Designer",
            "displayName": "App Designer"
          }
        ]
      },
      {
        "Business": [
          {
            "name": "Sales",
            "displayName": "Sales Manager"
          },
          {
            "name": "Marketing",
            "displayName": "Head of Marketing"
          }
        ]
      }
    ]
  };
  });

如何在选择框中填充json $ scope.names。 我发现困难，因为json有数组。 提前致谢

Answer 1

试试这个可能会帮助你
在<select>标记上使用ng-repeat

<select name="singleSelect" id="singleSelect" ng-model="selectedName">
  <option value="">---Please select---</option> <!-- not selected / blank option -->
  <option ng-repeat="n in names.software" value="{{n.name}}">{{n.displayName}}</option>
</select>

以相同的方式可以添加不同的数据。

Answer 2

如果在控制器中准备数据，将会更加容易

$scope.values = [];
angular.forEach($scope.names, function (value, key) {
    angular.forEach(value, function (value2, key2) {
        angular.forEach(value2, function (value3, key3) {
            angular.forEach(value3, function (value4, key4) {
                $scope.values.push(value4.name);
            });
        });
    });
});

并在选择中使用$ scope.values

Answer 3

一种使用自定义指令的方法。

<div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model='selectedName' custom-options>
        <option value="">-- choose an option --</option>
    </select>
</div>

var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.names = {
          "jobs": [
          {
            "Software": [
              {
                "name": "Developer",
                "displayName": "App Developer"
              },
              {
                "name": "Designer",
                "displayName": "App Designer"
              }
            ]
          },
          {
            "Business": [
              {
                "name": "Sales",
                "displayName": "Sales Manager"
              },
              {
                "name": "Marketing",
                "displayName": "Head of Marketing"
              },
              {
                "name": "Sales1",
                "displayName": "Sales Manager1"
              },
              {
                "name": "Marketing1",
                "displayName": "Head of Marketing1"
              }
            ]
          }
        ]
      };
  }).directive("customOptions", function () {
        return function (scope, element, attrs) {
            var data = scope['names']['jobs'];
            var propertyName = 'name';
            if (angular.isArray(data)) {
                angular.forEach(data, function(value, key) {
                    angular.forEach(value, function(ivalue, ikey) {
                        for (var i = 0; i < ivalue.length; i++) {
                            element.append(angular.element('<option>').text(ivalue[i][propertyName]).attr('value',ivalue[i][propertyName]));
                        }
                    })
                });
            }
        }
    })

JS菲德尔