0

select 要素のオプション リストの項目を選択済みとして設定する際に問題が発生しています。サーバーのバックエンドは Django 1.5 で、TastyPie を API として使用しています。

テンプレート（簡略化）

<select
    ng-model='dataService.major_minor.department'
    ng-options='d.name for d in dataService.departments'
    name='department'
    class='select2'
    required>
</select>

データ サービス

majorMinor.factory('dataService', function($rootScope, Restangular) {
    var self = {};

    self.degrees = [];
    self.departments = [];
    self.major_minor = false;
    self.majors_and_minors = [];

    self.fetch_degrees = function() {
        Restangular.all('degree').getList().then(function(results) {
            self.degrees = results;
        });
    };

    self.fetch_departments = function() {
        Restangular.all('department').getList().then(function(results) {
            self.departments = results;
        });
    };

    self.fetch_major_minor = function(majorMinorID) {
        Restangular.one('major-minor', majorMinorID).get().then(function(result) {
            self.major_minor = result;
        });
    };

    self.fetch_major_minor_list = function() {
        Restangular.all('major-minor').getList().then(function(results) {
            self.majors_and_minors = results;
        });
    };

    self.fetch_degrees();
    self.fetch_departments();
    self.fetch_major_minor_list();

    return self;
});

コントローラー

majorMinor.controller('EditCtrl',
    function($scope, $routeParams, dataService) {

        $scope.dataService = dataService;
        $scope.dataService.major_minor = false;
        $scope.dataService.fetch_major_minor($routeParams.majorMinorID);
    }
);

私が取り組んでいる問題は、major_minor.department が外部キーであることです。TastyPie は完全なオブジェクトを返すため、部門の URI だけではありません。dataService.departments 配列は、このユーザーが利用できるすべての部門の配列です。major_minor.department と dataService.departments[indexOfDepartment] を比較すると、それらは等しくなります。

ng-model が ng-option を正しく選択していない理由はありますか? これは両方を使用する私の2番目のプロジェクトにすぎないため、Angular/Restangularの理解にギャップがある可能性があります。

4

1 に答える 1

2

ジャック、私は同様の問題に遭遇し、ng-options を微調整することで解決できました

<select
    ng-model='dataService.major_minor.department.id'
    ng-options='d.id as d.name for d in dataService.departments'
    name='department'
    class='select2'
    required>
</select>

次に、明示的な ReSTful サービスに POST する前に、角度サービスを変更して dataservice.major_minor.department をオブジェクトから ID に変更しました。これにより、非正規化されたオブジェクトではなく、ペイロードでネットワークを通過する外部キーが得られます。これは coffeescript サービスであるため、使用しているファクトリ アプローチとは少し異なります。

   save: (major_minor) ->
      major_minor.department = major_minor.department?._id
      @$http.post("/api/major_minor/", major_minor)

angularjs のドキュメントでは、こちらの ng-options セクションでこれについて説明しています: https://docs.angularjs.org/api/ng/directive/select

特にこの問題に直面している将来の検索者にとって、それが役立つことを願っています.

于 2014-05-15T14:19:40.510 に答える