2

我有一个 AngularJS 前端和 REST (Jersey) 后端，可以读取老师分配给学生的书名列表。有两个视图/页面 - 列出和编辑。列表页是显示学生姓名和当前分配的书名的表格。

教师可以选择编辑分配给学生的书籍。选择“编辑”后，教师将被带到编辑视图/页面，该视图/页面有一个下拉列表，其中包含要在图书馆中阅读的可用书名列表，并通过调用 REST 服务 Books.getUnassigned() 填充。当一本书被分配给任何学生时，后端将从未分配列表中删除书名并将其添加到分配列表（Books.getAssigned()）。因此，在编辑页面上，我需要调用该服务，将当前分配的书名推送到该数组，并将默认设置为当前书名。

  <select ng-model="bookToAssign">
                <option ng-repeat="book in available_books" value="{{book}}">{{book}}</option>
  </select>

以下是我的服务电话。加载编辑页面时，$rootScope.args.arg 包含一个 json 对象，其中包含需要从前一页面传递到编辑页面的所有数据 - 验证该对象是否正确。

 $scope.available_books= NaiSvc.getUnassignedBooks.query(
        function(data){
            alert('success, got data: ', data);
            if($rootScope.args.arg !=null){
               data.push($rootScope.args.arg);  //verified this gets the right object
                $scope.bookToAssign.setDefault = data[data.length-1];
            }
        }, function(err){
            alert('request failed');
        }
    );

在我尝试执行 bookToAssign.setDefault 时的函数成功回调中，出现错误：TypeError：无法读取未定义的属性“setDefault”。有人可以指导我这里发生了什么吗？感谢帮助

4

1 回答 1

3

根据您的问题，我编写了一个听起来像您想要的工作示例。看看它，如果我错过了什么，请告诉我。

我设置了一个登陆页面，列出了一些学生和他们的书籍。我使用路由在视图之间传递数据以设置编辑页面。我使用 ng-options 指令列出书籍并相应地绑定它们。

演示插件

Javascript：

angular.module('plunker', [])

.config(function($routeProvider) {
  $routeProvider.when('/list', {
    templateUrl: 'list.html',
    controller: 'ListCtrl'
  })
    .when('/edit/:book', {
      templateUrl: 'edit.html',
      controller: 'EditCtrl'
    })
    .otherwise({
      redirectTo: '/list'
    });
})


.service('BookService', function($q, $timeout) {
  var unassigned = ['English', 'History'];

  this.getUnassigned = function() {
    var deferred = $q.defer();

    // Simulate async call to server.
    $timeout(function() {
      deferred.resolve(unassigned);
    });

    return deferred.promise;
  };

})

.controller('EditCtrl', function($scope, $routeParams, BookService) {
  // student.book needs to be set to avoid null select option
  $scope.student = {book: $routeParams.book, name: $routeParams.name };
  $scope.unassigned = BookService.getUnassigned().then(function(data) {
    return [$routeParams.book].concat(data);
  });
})

.controller('ListCtrl', function($scope) {
  $scope.students = [{
    name: 'Billy',
    book: 'Math'
  }, {
    name: 'Joe',
    book: 'Science'
  }];
});

HTML：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
    <script src="app.js"></script>
    <script type="text/ng-template" id="list.html">
      <table>
        <theader>
          <tr><td>Name</td><td>Book</td><td></td></tr>
        </theader>
        <tbody>
          <tr ng-repeat="student in students">
            <td>{{ student.name }}</td><td>{{ student.book }}</td><td><a ng-href="#/edit/{{ student.book }}?name={{student.name}}">Edit</a></td>
          </tr>
        </tbody>
      </table>
    </script>
    <script type="text/ng-template" id="edit.html">
      <div>
        <p>Current Student: {{ student.name }}</p>
        <label>Select A Book: </label>
        <select ng-model="student.book" ng-options="book for book in unassigned">
        </select>
        <p> You have selected: {{student.book}}</p>
    </script>
  </head>

  <body>
    <div ng-view></div>
  </body>
</html>
于 2013-10-27T23:14:41.543 回答