[英]How can I populate a select dropdown list from a JSON feed with AngularJS?
I have been looking hard for examples but could not find anything at all. 我一直在努力寻找例子,但根本找不到任何东西。 The only thing I know is that I could use the http module to get my data.
我唯一知道的是我可以使用http模块来获取我的数据。 Here is what I am currently doing, but it's coded with Knockout.
这是我目前正在做的事情,但它是用Knockout编码的。 Can someone give me some advice on how I could recode this feature using AngularJS?
有人可以给我一些关于如何使用AngularJS重新编码此功能的建议吗?
HTML HTML
<select id="testAccounts"
data-bind="options: testAccounts, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Select Account', value: selectedTestAccount">
</select>
Javascript 使用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>
The proper way to do it is using the ng-options
directive . 正确的方法是使用
ng-options
指令 。 The HTML would look like this. HTML看起来像这样。
<select ng-model="selectedTestAccount"
ng-options="item.Id as item.Name for item in testAccounts">
<option value="">Select Account</option>
</select>
JavaScript: 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;
});
});
You'll also need to ensure angular is run on your html and that your module is loaded. 您还需要确保在您的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>
This is an example on how to use it. 这是一个如何使用它的示例。
In my Angular Bootstrap dropdowns I initialize the JSON Array (vm.zoneDropdown) with ng-init (you can also have ng-init inside the directive template) and I pass the Array in a custom src attribute 在我的Angular Bootstrap下拉列表中,我使用ng-init初始化JSON数组(vm.zoneDropdown)(您也可以在指令模板中使用ng-init)并在自定义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>
Inside the controller: 控制器内部:
vm.zoneDropdown = [];
vm.getZoneDropdownSrc = function () {
vm.zoneDropdown = $customService.getZone();
}
And inside the customDropdown directive template(note that this is only one part of the bootstrap dropdown): 在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.