web-dev-qa-db-fra.com

Comment puis-je remplir une liste déroulante de sélection à partir d'un flux JSON avec AngularJS?

Je cherchais des exemples, mais je ne trouvais rien du tout. La seule chose que je sache, c'est que je pourrais utiliser le module http pour obtenir mes données. Voici ce que je suis en train de faire, mais c'est codé avec Knockout. Quelqu'un peut-il me donner des conseils sur la façon dont je pourrais recoder cette fonctionnalité en utilisant 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>
javascriptangularjsdrop-down-menu
62
Alan2

La bonne façon de le faire est d'utiliser le ng-options directive . Le HTML ressemblerait à ceci.

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

Vous devrez également vous assurer que angular est exécuté sur votre code HTML et que votre module est chargé.

<html ng-app="test">
    <body ng-controller="DemoCtrl">
    ....
    </body>
</html>
148
Martin
<select name="selectedFacilityId" ng-model="selectedFacilityId">
         <option ng-repeat="facility in facilities" value="{{facility.id}}">{{facility.name}}</option>
     </select>

Ceci est un exemple d'utilisation.

35
smk

Dans mes listes déroulantes Angular Bootstrap, j'initialise le tableau JSON (vm.zoneDropdown) avec ng-init (vous pouvez également avoir ng-init dans le modèle de directive), puis je passe le tableau dans un attribut src personnalisé.

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

À l'intérieur du contrôleur:

vm.zoneDropdown = [];
vm.getZoneDropdownSrc = function () {
    vm.zoneDropdown = $customService.getZone();
}

Et à l'intérieur du modèle de directive customDropdown (notez qu'il ne s'agit que d'une partie du menu déroulant 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>
2
Bernardo