Question

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

HTML

(1 2 3),(0 4 1),(1 3 4),(1 1 1),(2 1 0)

index = 0
sums_x[1].by_index = {(0,1)} # (index,cardinality)
sums_x[1].cardinalities = {"1": [0]} # cardinality: indexes

index = 1
sums_x[0].by_index = {(1,1)} # (index,cardinality)
sums_x[0].cardinalities = {"0,1": [1]} # cardinality: indexes
sums_x[1].by_index = {(0,1), (1,2)}
sums_x[1].cardinalities = {"1": [0], "2": [1]}

...

index = 4
sums_x[4].by_index = {(4,3), (4,4)} # (index,cardinality)
sums_x[4].cardinalities = {"2": [3], "3": [4], "4": [4]} # cardinality: indexes

sums_y[4].by_index = {(1,1), (3,2), (4,2), (4,3)}
sums_y[4].cardinalities = {"1": [1], "2": [3,4], "3": [4]}

sums_z[4].by_index = {(1,2), (2,1), (3,2), (4,3), (4,2)}
sums_z[4].cardinalities = {"2": [1,3,4], "1": [2], "3": [4]}

JS

sums_z[4]: 4,3 
  => val 0 => lookup by z sum (4 - 0) and cardinality (3 - 1) 
  => sums_z[4].cardinalities[2] yields only one match across: index 3
  => lookup by z sum (4 - 1) and cardinality (2 - 1)
  => sums_z[3].cardinalities[1] yields a match across: index 0
  => possible solution, indexes [4,3,0]

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

Answer 1

尝试这个可能会对你有帮助在ng-repeat代码

上使用<select>

<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 FIDDLE

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

3 个答案: