63

例を一生懸命探していましたが、何も見つかりませんでした。私が知っている唯一のことは、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>
4

3 に答える 3

148

それを行う適切な方法は、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>
于 2013-03-28T17:35:05.623 に答える
35 
<select name="selectedFacilityId" ng-model="selectedFacilityId">
         <option ng-repeat="facility in facilities" value="{{facility.id}}">{{facility.name}}</option>
     </select>

使い方の一例です。

于 2013-03-28T17:28:34.240 に答える