在角度js选择选项中绑定json数组答案

【问题标题】：Binding json arrays in angular js select option在角度js选择选项中绑定json数组
【发布时间】：2016-11-11 05:30:35
【问题描述】：

我正在使用 Angular 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>

    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 有数组，我发现困难。提前致谢

【问题讨论】：

查看文档docs.angularjs.org/api/ng/directive/select
使用ng-repeat 而不是ng-option
您希望看到的最终状态是什么？

标签： javascript angularjs arrays json drop-down-menu

【解决方案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>

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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 FIDDLE

【讨论】：