个人中心
gpt4 book ai didi

angularjs - 使用 AngularJS 和 $resource 保存新模型

转载 作者：行者123 更新时间：2023-12-02 21:56:13 25 4
gpt4 key购买 nike

我试图使用 $resource 来了解 AngularJS，但是我看到的大多数示例都没有解释如何使用 $resource 实际创建某些东西的新实例(或者整个设置应该是什么样子) 。我已在其底部发布了我的代码。

我有以下设置，其中发布到“/entry/api”应该创建一个新条目。条目对象本身具有三个属性:名称、描述和 ID。

我以为打电话$scope.save();会做两件事:

  1. 将输入字段映射为 POST 数据
  2. 向 $resource 中定义的 URL(在本例中为“/entry/api”)发出 POST 请求

我见过的一些示例是将数据手动映射到资源，如下所示:

var entry = new Entry();
entry.name = $name; // defined in entryController
entry.description = $scope.description; // <-- defined in entryController
entry.$save()

我认为这不是必需的，因为这些字段是在 html 中定义的。该解决方案的结果是:

  1. 在后端定义模型
  2. 在前端定义模型(entryController div)
  3. 将entryController div 中的值添加到模型的 JS 版本中，然后最后保存它。

这可能是 AngularJS 的工作方式，但我认为 html 中的输入字段会自动映射。

否则，如果您添加或删除(后端)模型的属性，则代码中至少有 3 个位置需要更新。

你应该如何使用 AngularJS 和 $resource 来保存新对象？

angular.module('entryManager', ['ngResource']);

function pollController($scope, $resource) {
    $scope.polls = $resource('/entry/api/:id', {id: '@id'});

    $scope.saveEntry = function() {
        this.save();
    }
}


<html ng-app="entryManager">
... <-- include angularjs, resource etc.

<div ng-controller="entryController">
    <input type='text' ng-model="name"><br/>
    <textarea ng-model="description" required></textarea><br/>
    <button class="btn btn-primary" ng-click="saveEntry()">Save</button>
</div>

最佳答案

首先你应该注意的是scope != model ，但范围可以包含模型。

您的范围内应该有一些对象，然后保存它。

所以，会有类似下面的内容:

HTML:

<div ng-controller="entryController">
    <input type='text' ng-model="poll.name"><br/>
    <textarea ng-model="poll.description" required></textarea><br/>
    <button class="btn btn-primary" ng-click="saveEntry()">Save</button>
</div>

JavaScript:

function pollController($scope, $resource) {
    var polls = $resource('/entry/api/:id', {id: '@id'});

    $scope.saveEntry = function() {
        polls.save($scope.poll);
    }
}

注意1:即使你没有初始化poll对象，AngularJS也会在你开始输入时自动创建新对象。

注意2:最好将表单包装成ngForm (通过使用 ng-controller 将 ng-form="someformname" 属性添加到 div 或使用 <form name='...'>..</form> 包装。在这种情况下，您可以在保存之前通过 $scope.someformname.$valid 检查表单的有效性。

很好的例子是 AngularJS 网站主页上的“连接后端”部分(顺便说一句，我最喜欢的)。

关于angularjs - 使用 AngularJS 和 $resource 保存新模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16153313/

25 4 0
文章推荐： flowtype - 如何使用 Flow 类型检查器扩展数组？
文章推荐： security - Firebase 数据库安全规则
文章推荐： Sitecore 在选定内容项上向用户隐藏发布按钮
文章推荐： websocket - Thrift 支持通过 websocket 发送数据吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com