web-dev-qa-db-ja.com

AngularJSを使用してJSONフィードから選択ドロップダウンリストを作成するにはどうすればよいですか？

私は例を探していましたが、何も見つかりませんでした。私が知っている唯一のことは、httpモジュールを使用してデータを取得できることです。これが現在私がやっていることですが、Knockoutでコーディングされています。誰かが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

適切な方法は 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>
148
Martin
<select name="selectedFacilityId" ng-model="selectedFacilityId">
         <option ng-repeat="facility in facilities" value="{{facility.id}}">{{facility.name}}</option>
     </select>

これは、使用方法の例です。

35
smk

Angular Bootstrapドロップダウンで、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>

コントローラー内部：

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