綁定角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

試試這個可能是它會幫助你
使用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); 
      }); 
     }); 
    }); 
}); 

在您選擇

Answer 3

一種可能的方式通過使用自定義指令做這個準備的數據，並使用$ scope.values這將是很多更容易。

<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