我如何填充从AngularJS一个JSON饲料选择下拉列表？ [英] How can I populate a select dropdown list from a JSON feed with AngularJS?
问题描述
我一直在寻找很难例子，但都无法找到任何东西。我唯一知道的是，我可以使用HTTP模块让我的数据。这是我目前做的事情，但它是$ C $光盘淘汰赛。有人可以给我一些建议，我怎么可以重新code。使用AngularJS此功能？
HTML
＆LT;选择ID =testAccounts
数据绑定=选择：testAccounts，optionsValue：'ID'，optionsText：名称，optionsCaption：选择帐户，值：selectedTestAccount＆GT;
＆LT; /选择＆GT;
的JavaScript
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{ VAR townSelect =功能（）{
VAR自我=这一点;
self.selectedTestAccount = ko.observable（）;
self.testAccounts = ko.observableArray（）;
VAR townViewModel =新townSelect（）;
ko.applyBindings（townViewModel）; $阿贾克斯（{
网址：'/管理/ GetTestAccounts'，
数据：{的applicationID：3}，
输入：GET，
成功：功能（数据）{
townViewModel.testAccounts（数据）;
}
}）;
}）;
＆LT; / SCRIPT＆GT;
正确的方式做到这一点是使用 NG-选项指令。该HTML是这样的。
＆LT;选择NG模型=selectedTestAccountNG选项=item.Id作为item.Name为项testAccounts＆GT;
＆LT;期权价值=＆GT;选择帐户＆LT; /选项＆GT;
＆LT; /选择＆GT;
JavaScript的：
angular.module（测试，[]）。控制器（'DemoCtrl'，函数（$范围，$ HTTP）{
$ scope.selectedTestAccount = NULL;
$ scope.testAccounts = []; $ HTTP（{
方法：GET，
网址：'/管理/ GetTestAccounts'，
数据：{的applicationID：3}
}）。成功（功能（结果）{
$ scope.testAccounts =结果;
}）;
}）;
您还需要确保的角度上你的html和你的模块被加载运行。
＆LT; HTML NG-应用=测试＆GT;
＆LT;机身NG控制器=DemoCtrl＆GT;
....
＆LT; /身体GT;
＆LT; / HTML＆GT;
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. Here is what I am currently doing, but it's coded with Knockout. Can someone give me some advice on how I could recode this feature using AngularJS?
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>
The proper way to do it is using the ng-options directive. The HTML would look like this.
<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;
});
});
You'll also need to ensure angular is run on your html and that your module is loaded.
<html ng-app="test">
<body ng-controller="DemoCtrl">
....
</body>
</html>
这篇关于我如何填充从AngularJS一个JSON饲料选择下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
