Javascript 如何使用AngularJS从JSON提要填充选择下拉列表？_Javascript_Angularjs_Drop Down Menu

Javascript 如何使用AngularJS从JSON提要填充选择下拉列表？

javascript angularjs drop-down-menu

Javascript 如何使用AngularJS从JSON提要填充选择下拉列表？,javascript,angularjs,drop-down-menu,Javascript,Angularjs,Drop Down Menu,我一直在努力寻找例子，但什么也找不到。我只知道我可以使用http模块来获取数据。这是我目前正在做的，但它的编码是敲除。有人能给我一些建议，告诉我如何使用AngularJS重新编码这个特性吗 HTML Javascript <script type='text/javascript'> $(document).ready(function () { var townSelect = function () { var self = this

我一直在努力寻找例子，但什么也找不到。我只知道我可以使用http模块来获取数据。这是我目前正在做的，但它的编码是敲除。有人能给我一些建议，告诉我如何使用AngularJS重新编码这个特性吗

HTML

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>


$（文档）.ready（函数（）{
var townSelect=函数（）{
var self=这个；
self.selectedTestAccount=ko.observable（）；
self.testAccounts=ko.observearray（）；
var townViewModel=newtownselect（）；
ko.应用绑定（townViewModel）；
$.ajax({
url:“/Admin/getestaccounts”，
数据：{applicationId:3}，
键入：“GET”，
成功：功能（数据）{
townViewModel.testAccounts（数据）；
}
});
});


{{facility.name}

这是一个如何使用它的示例。

正确的方法是使用。HTML如下所示

<select ng-model="selectedTestAccount" 
        ng-options="item.Id as item.Name for item in testAccounts">
    <option value="">Select Account</option>
</select>

您还需要确保angular在html上运行，并且模块已加载

<html ng-app="test">
    <body ng-controller="DemoCtrl">
    ....
    </body>
</html>


....

在我的角度引导下拉列表中，我使用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>

在customDropdown指令模板中（注意，这只是引导下拉列表的一部分）：

这让我大吃一惊；所以我想我应该在这里发表评论。如果没有指定ng模型，ng选项似乎没有任何影响。否则，+1；感谢您的回答。是否有人发布预期的JSON？TIAMartin，这将执行$http（）立即。只有在特定事件发生时（例如用户选择许多单选按钮中的一个）才可以填充下拉列表吗？如果可以，在哪里可以找到工作代码示例？换句话说，如何实现延迟加载、按需下拉列表（通过AJAX）列表？我认为应该是ng repeat而不是ng:repeat:）请注意，这比公认的答案更占用内存：

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 ng-app="test">
    <body ng-controller="DemoCtrl">
    ....
    </body>
</html>

<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();
}

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