javascript - 如何调用 AngularJS REST 服务来填充表并设置默认值-6ren

javascript - 如何调用 AngularJS REST 服务来填充表并设置默认值

转载作者：行者123 更新时间：2023-11-29 19:46:04

25

4

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

教师可以选择编辑分配给学生的图书。选择“编辑”后，教师会转到“编辑” View /页面，该 View /页面有一个下拉列表，其中包含可在图书馆阅读的书名列表，并通过调用 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”。有人可以指导我这里发生了什么吗？感谢帮助

最佳答案

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

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

演示 plunker

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>

关于javascript - 如何调用 AngularJS REST 服务来填充表并设置默认值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19622039/

25

4

0

文章推荐： Android，具有多个 Activity 的 EspressoTesting

文章推荐： javascript - 来自事件的 Angular 更新范围

文章推荐： android - JUnit 不适用于 IntelliJ Android 项目

文章推荐： javascript - 正则表达式替换失败

rest - 非 RESTful 与 RESTful
我对编程真的很陌生，并且在理解 RESTful API 的概念时遇到了一些麻烦。我读过 REST 和 RESTful API。我已经查看了 SO 中已经提出的问题，但似乎无法更好地理解该主题。在我的
rest - 简单来说，REST，RESTFul，SOA和微服务是什么？
我以为我知道REST /“RESTFul”，restfulservices，webservices，SOA和微服务是什么，但是我遇到了许多不同的定义，我得出的结论是这些术语被过度使用，滥用或完全错误定
rest - SharePoint REST 在单个 REST 查询中获取用户标题
我有一个列表，其中有一个“人员和组”列。当我使用 REST 查询行时，我会在此列中列出用户 ID。我发现这篇文章将帮助我将每个 id 转换为标题 http://www.codeproject.com
rest - 什么是 REST 调用以及如何发送 REST 调用？
我想问一些关于 REST 调用的问题。我是 REST 调用的绿色，我想了解什么是 REST 调用以及如何使用 URL 向服务器发送 REST 调用。谁能给我一些基本的教程或链接供我引用？另外，如果我
rest - 为什么 REST Web 服务称为 REST
很难说出这里问的是什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或言辞激烈，无法以目前的形式合理回答。如需帮助澄清此问题以便可以重新打开，visit the help center . 8年前关闭
rest - 什么是监视 REST 资源以进行更改的 RESTful 方式？
如果有一个 REST 资源我想监视来自其他客户端的更改或修改，那么最好(也是最 RESTful)的方法是什么？我这样做的一个想法是通过提供特定资源来保持连接打开，而不是在资源不(尚)存在时立即返回。
rest - RESTful 服务中的分页
我有一个可以返回大量项目的 RESTful API，我希望能够使用分页样式技术来限制项目数量，这是 RESTful API 中的一个好主意吗？如果有可能最好通过链接(在这种情况下为 url)或请求正
rest - RESTful 发布多个实体的策略
我仍然处于适应以 REST 方式做事的过程中。在我的情况下，客户端软件将与 RESTful 服务交互。很少，客户端会上传其整个实体数据库(每个实体序列化为大约 5kb 的 xml 块)。也许我错了
rest - REST 中的子资源和路径变量冲突？
设计一个路径解析可能有歧义的 REST API 是否被认为是不好的做法？例如: GET /animals/{id} // Returns the animal with the given ID
rest - REST 是如何无状态的？
我知道 REST 并且知道在不使用 session 的情况下创建 RESTful Web 服务，我更了解它，但我不太了解无状态的概念以及使用 REST 如何使您的应用程序可扩展有人可以解释 REST
rest - REST API的单点登录支持
我正在尝试找到解决以下问题的最佳方法:我们的应用程序是SaaS，它支持Web登录的SAML。该应用程序还公开了应该在自动化和无人值守的流程中使用的REST API，这意味着没有交互式用户可以键入凭据。
rest - REST 是否可以建立连接池？
由于 REST 是无状态的，因此传入的每个请求都不知道传入的前一个请求。在这种情况下是否可以使用连接池？如果要实现连接池，它将像标准数据库连接一样在每个请求时打开连接池并关闭它。如何实现 REST
rest - 得墨忒耳定律与 REST
得墨忒耳定律(真的应该是得墨忒耳的建议)说你不应该“穿过”一个物体去接触它们的子物体。如果您作为客户需要执行一些重要的操作，大多数情况下您使用的域模型应该支持该操作。 REST 原则上是一个愚蠢的对象
rest - 通过示例了解 REST
我唯一真正接触到 REST 的想法已经通过 Ruby on Rails 的 RESTful routing .这非常适合我使用 Rails 构建的基于 CRUD 的应用程序，但因此我对 RESTful
rest - RESTful URL的好处
有什么好处 http://www.example.com/app/servlet/cat1/cat2/item 网址超过 http://www.example.com/app/servlet?c
rest - REST 服务中的建模操作
我知道以前有人问过这类问题。我有我的问题的解决方案，我想知道我是否在任何地方破坏了 REST 或 HTTP 主体。在我的系统中，我有一个名为 member 的资源。支持通常的GET/POST/PUT
rest - REST API响应部分成功
我有一个API，可以执行一些批量处理任务。假设它确实为某些资源命名。我批量传递了7个请求，其中5个更新成功，2个失败。我的问题是如何应对。使用HTTP时，我无法同时返回成功和错误。有一个部分成功
rest - RESTful 单例资源
我来自 RPC 世界，但目前正在调查使用 REST 是否适合我的项目。至于据我了解 Wikipedia RESTful 服务的基本思想是提供对集合及其各个元素的访问。在我的情况下，服务器将是一个测量
rest - Tapestry + REST
我想将REST添加到我的挂毯项目中，因此需要知道如何实现它。有什么更好的方法？谢谢。 [编辑，从答案中复制:]我必须将GET，PUT，POST和DELETE服务添加到我的挂毯应用程序中。我看到Ta
rest - RESTful 服务中的资源级别授权
让 /users/{id}成为 RESTful 服务中的资源 url。启用基本身份验证，只有经过身份验证的用户才能访问该 url。示例场景: User_1 & User_2是经过身份验证的用户，用

首页

博学

6Ren·AI

商城

javascript - 如何调用 AngularJS REST 服务来填充表并设置默认值