Использование ng-model с ng-options и Restangular с AngularJS

У меня возникают проблемы с получением элементов в списке опций моего выбранного элемента, которые должны быть установлены как выбранные. Бэкэнд моего сервера — 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-модель неправильно выбирает ng-опцию? Возможно, в моем понимании Angular/Restangular есть пробел, так как это только мой второй проект, использующий оба.


person Jack Slingerland    schedule 24.10.2013    source источник
comment
Вы пытались отправить статический объект в сервис и загрузить его по-своему?   -  person Maxim Shoustin    schedule 24.10.2013
comment
@MaximShoustin Еще нет. С привязкой данных, которую делает Angular, я не уверен, что это будет иметь значение. Я могу попробовать это некоторое время и отчитаться.   -  person Jack Slingerland    schedule 24.10.2013
comment
Использование статического объекта для параметров, похоже, ничего не исправило.   -  person Jack Slingerland    schedule 25.10.2013


Ответы (1)


Джек, я столкнулся с похожей проблемой и смог решить ее, настроив 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>

Затем я изменил свою службу angular, чтобы изменить dataservice.major_minor.department с объекта на идентификатор, прежде чем отправить POST в свою экспресс-службу ReSTful. Это должно дать вам внешний ключ, проходящий через провод в полезной нагрузке, а не денормализованный объект. Это сервис 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

Надеюсь, что это поможет, особенно будущим искателям, которые сталкиваются с этой проблемой.

person SRMelody    schedule 15.05.2014
comment
Возможно, это должно быть d.id as d.name for d in dataService.departments (добавлено as)? - person Jason Swett; 21.11.2014