使用AngularJS和$resource保存新模型

前端之家收集整理的这篇文章主要介绍了使用AngularJS和$resource保存新模型前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用$ resource理解AngularJS,但我看到的大多数示例不解释如何使用$ resource实际创建新实例(或整个设置应该如何显示)。
我已经张贴我的代码在这底部

我有以下设置,其中发布到’/ entry / api’应该创建一个新的条目。
entry对象它自身有三个属性:name,description和id。

我以为调用
$ scope.save();会做两件事:

>将输入字段映射为POST数据
>对$ 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中定义。
解决方案导致:

>在后端定义模型
>在前端定义一个模型(entryController div)
>将来自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>
第一个认为你应该注意,范围!=模型,但范围可以包含模型。

你应该在你的范围内有一些对象,然后保存它。

所以,会有类似如下:

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:即使你没有初始化的轮询对象,AngularJS会在你开始输入时自动创建新的对象。

注意2:它更好地包装你的表单到ngForm(通过添加ng-form =“someformname”属性到使用ng-controller的div或用< form name ='...'> ..< / form>在这种情况下,您可以通过$ scope.someformname。$ valid检查表单的有效性,然后保存。

好的例子是在AngularJS网站的主页上“布线后端”部分(btw,我最喜欢)。

原文链接:https://www.f2er.com/angularjs/146078.html

猜你在找的Angularjs相关文章