Wie kann ich eine Auswahlliste aus einem JSON-Feed mit AngularJS auffüllen?

Ich habe nach Beispielen gesucht, konnte aber nichts finden. Das einzige, was ich weiß, ist, dass ich das http-Modul benutzen könnte, um meine Daten zu bekommen. Hier ist, was ich gerade mache, aber es ist mit Knockout codiert. Kann mir jemand einen Hinweis geben, wie ich diese Funktion mit AngularJS umcodieren kann?Wie kann ich eine Auswahlliste aus einem JSON-Feed mit AngularJS auffüllen?

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>

Quelle

2013-03-28 Alan2

144

Der richtige Weg ist die Verwendung der ng-options directive. Das HTML würde so aussehen.

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

Sie werden auch Winkel sicherstellen müssen, ist auf Ihrem html laufen und dass das Modul geladen ist.

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

Quelle

2013-03-28 17:35:05 Martin

+12

Das hat mich gestolpert; also dachte ich, ich würde hier einen Kommentar abgeben. Wenn das ng-Modell nicht angegeben ist, scheinen die ng-Optionen keine Auswirkungen zu haben. Ansonsten +1; Danke für die Antwort. – JeffryHouser

Dies scheint in Safari nicht zu funktionieren. –

Würde jemand bitte den erwarteten JSON posten? TIA – chrisinmtown

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

Dies ist ein Beispiel dafür, wie es zu benutzen.

Quelle

2013-03-28 17:28:34 smk

Ich denke, es sollte ng-Wiederholung nicht ng werden: wiederholen :) – lorraine

Bitte beachten Sie, dass diese speicherintensiver als die akzeptierte Antwort ist: https://docs.angularjs.org/api/ng/directive/ngOptions – Wtower

In meinem Angular Bootstrap-Dropdown-Listen initialisieren ich das JSON-Array (vm.zoneDropdown) mit ng-init (Sie können auch in der Richtlinie Vorlage ng-init haben kann) und ich übergeben Sie das Array in einem Attribut src benutzerdefinierte

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

innerhalb der Steuerung:

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

Und in der customDropdown Richtlinie Vorlage (beachten Sie, dass dies nur ein Teil des Bootstrap-Drop-Down ist):

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

Quelle

2015-11-24 14:49:08 Bernardo

Wie kann ich eine Auswahlliste aus einem JSON-Feed mit AngularJS auffüllen?

Antwort

Verwandte Themen