【问题标题】:Using ng-model with ng-options and Restangular with AngularJS使用带有 ng-options 的 ng-model 和带有 AngularJS 的 Restangular
【发布时间】:2013-10-24 12:50:48
【问题描述】:

我在将我的选择元素的选项列表中的项目设置为选中时遇到问题。我的服务器后端是 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?我对 Angular/Restangular 的理解可能存在差距,因为这只是我使用两者的第二个项目。

【问题讨论】:

  • 您是否尝试将静态对象发布到服务中并以您的方式加载?
  • @MaximShoustin 我还没有。使用 Angular 的数据绑定,我不确定它是否会有所作为。不过我可以试一试,然后回来报告。
  • 对选项使用静态对象似乎没有解决任何问题。

标签: javascript angularjs tastypie restangular


【解决方案1】:

Jack,我遇到了一个类似的问题,并且能够通过调整 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>

然后我更改了我的角度服务,将 dataservice.major_minor.department 从一个对象更改为 ID,然后再发布到我的快速 ReSTful 服务。这应该为您提供通过有效负载中的线路传递的外键,而不是非规范化对象。这是一种咖啡脚本服务,与您采用的工厂方法略有不同。

   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

希望对您有所帮助,尤其是遇到此问题的未来搜索者。

【讨论】:

  • 这可能应该是d.id as d.name for d in dataService.departments(添加了“as”)?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-05-05
  • 1970-01-01
  • 2016-07-10
  • 1970-01-01
  • 2015-03-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多