Как я могу заполнить выпадающий список select из канала JSON с помощью AngularJS?

Question

Как я могу заполнить выпадающий список select из канала JSON с помощью AngularJS?

Я долго искал примеры, но не смог найти ничего вообще. Единственное, что я знаю, это то, что я мог бы использовать http-модуль для получения моих данных. Вот что я сейчас делаю, но это закодировано с нокаутом. Может кто-нибудь дать мне несколько советов о том, как я могу перекодировать эту функцию с помощью 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>

987 3

javascript angularjs drop-down-menu

3 ответов:

Comments

Ничего не найдено.

Martin · Accepted Answer · 2016-09-07 19:13:14

правильный способ сделать это с помощью 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;
    });
});
Вам также нужно будет убедиться, что angular запускается на вашем html и что ваш модуль загружен.
<html ng-app="test">
    <body ng-controller="DemoCtrl">
    ....
    </body>
</html>

smk · Accepted Answer · 2016-08-29 20:30:25

<select name="selectedFacilityId" ng-model="selectedFacilityId">
         <option ng-repeat="facility in facilities" value="{{facility.id}}">{{facility.name}}</option>
     </select>

Это пример того, как использовать его.

Bernardo · Accepted Answer · 2015-11-24 17:01:08

в моих выпадающих списках угловой начальной загрузки я инициализирую массив JSON (vm.zoneDropdown) с ng-init (вы также можете иметь 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>
внутри контроллера:
vm.zoneDropdown = [];
vm.getZoneDropdownSrc = function () {
    vm.zoneDropdown = $customService.getZone();
}
и внутри шаблона директивы customDropdown (обратите внимание, что это только одна часть раскрывающегося списка bootstrap):
<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>