如何从AngularJS的JSON feed中填充select下拉列表？
我一直在努力寻找榜样，但根本找不到任何东西。 我唯一知道的是我可以使用http模块来获取我的数据。 这是我目前正在做的，但它是用Knockout编码的。 有人可以给我一些build议，我怎么可以使用AngularJS重新编码这个function？
HTML
<select id="testAccounts" data-bind="options: testAccounts, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Select Account', value: selectedTestAccount"> </select> 使用Javascript
<script type='text/javascript'> $(document).ready(function () { var townSelect = function () { var self = this; self.selectedTestAccount = ko.observable(); self.testAccounts = ko.observableArray(); var townViewModel = new townSelect(); ko.applyBindings(townViewModel); $.ajax({ url: '/Admin/GetTestAccounts', data: { applicationId: 3 }, type: 'GET', success: function (data) { townViewModel.testAccounts(data); } }); }); </script>
正确的方法是使用ng-options指令 。 HTML看起来像这样。
<select ng-model="selectedTestAccount" ng-options="item.Id as item.Name for item in testAccounts"> <option value="">Select Account</option> </select>
JavaScript的：
angular.module('test', []).controller('DemoCtrl', function ($scope, $http) { $scope.selectedTestAccount = null; $scope.testAccounts = []; $http({ method: 'GET', url: '/Admin/GetTestAccounts', data: { applicationId: 3 } }).success(function (result) { $scope.testAccounts = result; }); });
您还需要确保在您的html上运行angular度，并且您的模块已加载。
<html ng-app="test"> <body ng-controller="DemoCtrl"> .... </body> </html>
<select name="selectedFacilityId" ng-model="selectedFacilityId"> <option ng-repeat="facility in facilities" value="{{facility.id}}">{{facility.name}}</option> </select>
这是如何使用它的一个例子。
在我的Angular Bootstrap下拉菜单中，我用ng-init（你也可以在指令模板中有ng-init）初始化JSON数组（vm.zoneDropdown），并且在一个自定义的src属性中传递数组
<custom-dropdown control-id="zone" label="Zona" model="vm.form.zone" src="vm.zoneDropdown" ng-init="vm.getZoneDropdownSrc()" is-required="true" form="farmaciaForm" css-class="custom-dropdown col-md-3"></custom-dropdown>
控制器内部：
vm.zoneDropdown = []; vm.getZoneDropdownSrc = function () { vm.zoneDropdown = $customService.getZone(); }
在customDropdown指令模板中（请注意，这只是引导下拉菜单的一部分）：
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="btn-append-to-body"> <li role="menuitem" ng-repeat="dropdownItem in vm.src" ng-click="vm.setValue(dropdownItem)"> <a ng-click="vm.preventDefault($event)" href="##">{{dropdownItem.text}}</a> </li> </ul>
