Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何使用AngularJS在另一个对象中添加对象的id

如何使用AngularJS在另一个对象中添加对象的id
EN

Stack Overflow用户
提问于 2016-03-24 15:04:02
回答 3查看 1.5K关注 0票数 3

我有两个对象,事件和评论:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   {
    "name": "events",
    "fields": {
      "name": {
        "type": "string"
      },
      "date": {
        "type": "datetime"
      },
      "time": {
        "type": "datetime"
      },
      "info": {
        "type": "text"
      },
      "users": {
        "collection": "users_events",
        "via": "event"
      },
      "eventCommentsId": {
        "collection": "comments",
        "via": "eventId"
      },
    }
  },
  {
    "name": "comments",
    "fields": {
      "content": {
        "type": "text"
      },
      "owner": {
        "object": "users"
      },
      "eventId": {
        "object": "events"
      },
      "date": {
        "type": "datetime"
      }
    }
  }

每个事件都应该有自己独特的注释集合。所以,这是一对多的关系。

现在,我可以得到所有的评论,而不仅仅是那些对应于每个事件的评论。我的想法是,我需要在每个评论中包括事件的id。但是,我不太确定该怎么做。

如果有人能帮我解决这个问题,那就太棒了!

我正在用Ionic/AngularJS构建应用程序,我用Backand存储我的数据。

提前感谢!

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.controller('EventDetailCtrl', ['$scope', '$stateParams', '$ionicSideMenuDelegate', 'EventService', 'CommentService',function($scope, $stateParams, $ionicSideMenuDelegate, EventService, CommentService) { 
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };    

  var id = $stateParams.id;
  EventService.getEvent(id).then(function(response){
   $scope.event = response.data;
});

  $scope.comments = [];
  $scope.input = {};

  function getAllComments() {
    CommentService.getComments()
    .then(function (result) {
      $scope.comments = result.data.data;
    });
  }

  $scope.addComment = function() {
    CommentService.addComment($scope.input)
    .then(function(result) {
      $scope.input = {};
      getAllComments();
    });
  }

  $scope.deleteComment = function(id) {
    CommentService.deleteComment(id)
    .then(function (result) {
      getAllComments();
    });
  }

  getAllComments();

}])

.service('CommentService', function ($http, Backand) {    
  var baseUrl = '/1/objects/';
  var objectName = 'comments/';

  function getUrl() {
    return Backand.getApiUrl() + baseUrl + objectName;
  }

  function getUrlForId(id) {
    return getUrl() + id;
  }

  getComments = function () {
    return $http.get(getUrl());
  };

  addComment = function(event) {
    return $http.post(getUrl(), event);
  }

  deleteComment = function (id) {
    return $http.delete(getUrlForId(id));
  };

  getComment = function (id) {
    return $http.get(getUrlForId(id));
  };


  return {
    getComments: getComments,
    addComment: addComment,
    deleteComment: deleteComment,
    getComment: getComment
  }   
})
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-03-25 00:34:29

最好是从后端获取特定事件的所有注释,而不是从服务器获取所有内容,并在前端进行过滤。您可以打电话,例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
http://mysite/getComments?eventId=2533213

在注释模式(对于DB)中,可以有一个字段为eventId。然后,您可以从DB获取具有调用中提供的事件Id的所有注释,并返回到您的应用程序响应。

在前端你可以:

主计长:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function getCommentsById(event) {
    CommentService.getCommentsById(event)
    .then(function (result) {
      $scope.comments = result.data.data;
    });
  }

服务:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
getCommentsById = function (event) {
    return $http.get(getUrl() + "?eventId=" + event.id); //supposing you have event.id
  };
票数 2
EN

Stack Overflow用户

发布于 2016-03-25 17:01:42

您还可以在Backand的仪表板中创建一个查询,并将其命名为GetCommentsByEventId,使用api端点Backand.getApiUrl() + '/1/query/data/GetCommentsByEventId',您可以传递id,您将得到该事件的注释。(见下面的截图)

在使用SQL SELECT * FROM comments WHERE event='{{eventId}}'的查询中,您将得到该事件id的注释。

或者您可以在API url中使用一个过滤器,比如Backand.getApiUrl() + /1/comments?filter={"fieldName":"event","operator":"in", "value": "33"} (这里不是为可读性而编码的url,33是eventId)。

在这个屏幕截图中,演示的DB模型如下所示:

DB模型json如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    [
{
    "name": "users",
    "fields": {
        "email": {
            "type": "string"
        },
        "firstName": {
            "type": "string"
        },
        "lastName": {
            "type": "string"
        },
        "user": {
            "collection": "comments",
            "via": "user"
        }
    }
},
{
    "name": "events",
    "fields": {
        "title": {
            "type": "string"
        },
        "created_at": {
            "type": "datetime"
        },
        "eventId": {
            "collection": "comments",
            "via": "event"
        }
    }
},
{
    "name": "comments",
    "fields": {
        "event": {
            "object": "events"
        },
        "user": {
            "object": "users"
        },
        "text": {
            "type": "string"
        }
    }
}
]

在DB模型中,我只将events模型中的events重命名为eventCommentsId,以明确表示它是对注释的引用。

请找到下面的演示代码(不在这里工作,在Backand脚本中的不安全操作)或此小提琴中的工作演示。

角码可以重构一点,但它是工作的。如果有其他不正确的地方,请告诉我,因为这是我在Backand的第一个例子。

而且,演示中没有用户登录,这就是为什么所有内容都将添加到userId = 1中。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
angular.module('demoApp', ['ionic', 'backand'])
  //Update Angular configuration section
  .config(function(BackandProvider) {
    BackandProvider.setAppName('myfirstapp123');
    //BackandProvider.setSignUpToken('-token-');
    BackandProvider.setAnonymousToken('9f99054f-3205-426b-afc7-158d7ac3500f');
  })
  .controller('mainController', MainController)
  .service('dataService', dataService)
  .factory('commentsFactory', Comments);

function MainController($scope, $http, Backand, dataService, commentsFactory) {
  var vm = this,
    comment = commentsFactory;

  vm.currentUserId = 1; //<<<< should be the current user later (no login yet)

  vm.displayedComments = {};
  dataService.getList('events').then(function(response) {
    vm.events = response.data;
  }); //eventsFactory;

	vm.addEvent = function(newTitle) {
  	
    if (!newTitle) return; // don't add empty events
  	// this should be in a factory later
    var newDate = new Date();
    
    return $http({
        method: 'POST',
        url: Backand.getApiUrl() + '/1/objects/events?returnObject=true',
        data: {
          title: newTitle,
          created_at: newDate
        }
      }).then(function(response) {
      	//console.log(response, vm.events);
      	vm.events.data.push(response.data);
      });
  }
  vm.addComment = function(userId, event, text) {
    //event.comments.push(
    if (!text) return;
    
    comment.create(userId, event.id, text).then(function(response) {
      event.comments.push(response.data);
      //console.log(response);
    });
  }

  vm.getComments = commentsFactory.getComments;
  vm.showComment = function(event) {
    //console.log(event);
    commentsFactory.getComments(event.id).then(function(response) {
      vm.displayedComments[event.id] = !vm.displayedComments[event.id];
      event.comments = response.data;
    });
  };
  vm.remove = function(event, commentId) {
  	console.log('removing', event, commentId);
  	commentsFactory.delete(commentId).then(function(response){
    	//console.log('removed', response, event);
      // next update collection in angular
      event.comments = event.comments.filter(function(comment) {
      	return comment.id !== commentId; // remove comment
      });
    });
  }
}

function dataService($http, Backand) {
  var vm = this;
  //get the object name and optional parameters
  vm.getList = function(name, sort, filter) {
    return $http({
      method: 'GET',
      url: Backand.getApiUrl() + '/1/objects/' + name,
      params: {
        pageSize: 20,
        pageNumber: 1,
        filter: filter || '',
        sort: sort || ''
      }
    });
  }
}

function Comments($http, Backand) {
  return {
    create: function(user, event, text) {
      return $http({
        method: 'POST',
        url: Backand.getApiUrl() + '/1/objects/comments?returnObject=true',
        data: {
          event: event,
          user: user,
          text: text
        }
      });
    },
    delete: function(commentId) {
    	return $http({
        method: 'DELETE',
        url: Backand.getApiUrl() + '/1/objects/comments/' + commentId
      });
    },
    getComments: function(id) {
      return $http({
        method: 'GET',
        url: Backand.getApiUrl() + '/1/query/data/GetCommentsByEventId',
        params: {
          parameters: {
            eventId: id
          }
        }
      });
    }
  }
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/css/ionic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.bundle.js"></script>
<script src="https://cdn.backand.net/backand/dist/1.8.2/backand.min.js"></script>

<div ng-app="demoApp" ng-controller="mainController as mainCtrl">

  <ion-header-bar align-title="center" class="bar-dark">
    <h1 class="title">EventsApp</h1>
   </ion-header-bar>
  <ion-content>
    <!--<pre>{{mainCtrl.events | json : 2}}</pre-->
    <!--<pre>{{mainCtrl.displayedComments|json:2}}</pre>-->
    <ion-list>
      <ion-item>
      <form ng-submit="mainCtrl.addEvent(mainCtrl.newEventTitle); mainCtrl.newEventTitle = '';">
        <input type="text" ng-model="mainCtrl.newEventTitle" placeholder="event title..."/>
        <button class="item item-icon-left">
          <i class="icon ion-plus-round"></i>
          add event
        </button>
      </form>
      </ion-item>
      <ion-item ng-if="mainCtrl.events.data.length === 0">
        <h1>
        There are no events yet.
        </h1>
      </ion-item>
      <ion-item ng-repeat="event in mainCtrl.events.data | orderBy: '-created_at'" class="item item-button-right">
        <h1>
          {{event.title}}
        </h1>
        <button ng-click="mainCtrl.showComment(event)" class="button icon-left ion-ios-chatbubble" title="{{mainCtrl.displayedComments[event.id]? 'hide comments': 'show comments'}}">
        </button>
        <div ng-show="mainCtrl.displayedComments[event.id]" class="list">
          
          <form ng-submit="mainCtrl.addComment(mainCtrl.currentUserId, event, commentText)">
            <label class="item item-input">
              <span class="input-label">Username</span>
              <input type="text" disabled ng-model="mainCtrl.currentUserId">
            </label>
            <label class="item item-input">
              <span class="input-label">Comment</span>
              <input type="text" ng-model="commentText">
            </label>
            <button class="button button-positive">
               leave comment
            </button>
          </form>
          
          <ion-list>
            <ion-item ng-if="event.comments.length === 0">
              <h2>
              No comment yet. Be the first and leave a comment.
              </h2>
            </ion-item>
            <ion-item ng-repeat="comment in event.comments">
            <div class="item item-button-right">
            user {{comment.user}} wrote {{comment.text}}
              <button ng-click="mainCtrl.remove(event, comment.id)" class="button button-positive">
              <i class="icon ion-ios-trash"></i>
              </button>
              </div>
            
            </ion-item>
          </ion-list>
        </div>
      </ion-item>
    </ion-list>
  </ion-content>
</div>

票数 2
EN

Stack Overflow用户

发布于 2016-03-26 06:35:05

您还可以使用?deep=true查询参数,该参数在一对多的情况下会将所有集合都带来。

在您的示例中,/1/objects/ event /1?deep=true将返回带有id=1的所有事件注释。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var id = $stateParams.id;
var useDeep = true;
EventService.getEvent(id, useDeep).then(function(response){
  $scope.event = response.data;
  $scope.comments = response.data.comments;
});
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36211458

复制
相关文章
如何在系统中添加字体(添加字体到系统)
笔者最近在使用win10自带的OneNote笔记本记笔记的时候,发现笔者电脑中没有华文新魏这个字体,最开始以为是OneNote不带有这个字体,经过一段时间的收集资料后发现,是笔者电脑win10系统中不带有这个字体,现将有关概念和字体安装方法做一下记录。
全栈程序员站长
2022/08/01
4K0
如何在系统中添加字体(添加字体到系统)
winfrom如何在listview中添加控件
private Button btn = new Button(); private void Form1_Load(object sender, EventArgs e) { ListViewItem[] lvs = new ListViewItem[3]; lvs[0] = new ListViewItem(new string[] { "行1列1", "行1列2", "" }); l
码农阿宇
2018/04/18
2.6K0
如何在Hue中添加Spark Notebook
CDH集群中可以使用Hue访问Hive、Impala、HBase、Solr等,在Hue3.8版本后也提供了Notebook组件(支持R、Scala及python语言),但在CDH中Hue默认是没有启用Spark的Notebook,使用Notebook运行Spark代码则依赖Livy服务。在前面Fayson也介绍了《Livy,基于Apache Spark的开源REST服务,加入Cloudera Labs》、《如何编译Livy并在非Kerberos环境的CDH集群中安装》、《如何通过Livy的RESTful API接口向非Kerberos环境的CDH集群提交作业》、《如何在Kerberos环境的CDH集群部署Livy》、《如何通过Livy的RESTful API接口向Kerberos环境的CDH集群提交作业》、《如何打包Livy和Zeppelin的Parcel包》和《如何在CM中使用Parcel包部署Livy及验证》,本篇文章Fayson主要介绍如何在Hue中添加Notebook组件并集成Spark。
Fayson
2018/11/16
6.8K1
7.如何在OpenLDAP中实现将一个用户添加到多个组
在前面的文章Fayson讲了《1.如何在CentOS6.5安装OpenLDAP并配置客户端》、《2.OpenLDAP集成SSH登录并使用SSSD同步用户》、《3.如何实现OpenLDAP的主主同步》、《4. 如何为Hive配置OpenLDAP认证》、《5.如何为Impala配置OpenLDAP认证》以及《6.如何为Hue配置OpenLDAP认证》。本篇文章主要介绍如何在OpenLDAP中将一个用户添加到多个组中。
Fayson
2018/03/29
4.8K0
如何在 wxPython 中创建多个工具栏
作为C++库wxWidgets的包装器,wxPython允许Python开发人员利用这个成熟且经过实战测试的框架的强大功能。它具有各种平台的本机外观和感觉,包括Windows,macOS和Linux。使用 wxPython,您可以使用各种小部件(例如按钮、文本控件,当然还有工具栏)设计具有视觉吸引力且响应迅速的桌面应用程序。
很酷的站长
2023/08/11
3100
如何在 wxPython 中创建多个工具栏
如何在Ansible中复制多个文件和目录
Ansible 通过 copy 和 fetch 模块提供了基本的复制文件和目录的功能.
东风微鸣
2022/04/21
17.4K2
如何在Ansible中复制多个文件和目录
如何在ModelSim中添加Xilinx仿真库
今天给大侠带来在FPGA设计应用中如何在ModelSim中添加Xilinx仿真库,话不多说,上货。
FPGA技术江湖
2020/12/30
5.3K1
如何在Vue中动态添加类名
能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体。
前端小智@大迁世界
2020/05/12
6.2K0
如何在README.md文件中添加图片
1、在github上的仓库建立一个存放图片的文件夹,文件夹名字随意。如:img-folder
挥刀北上
2021/03/10
6.1K0
如何在README.md文件中添加图片
条码软件中如何在边框上添加文字
很多用户在使用条码标签软件设计制作标签时,会有自己的一些个性化的需要,虽然条码软件不能和作图软件相比,但是很多效果还是可以通过一些小技巧来实现的。比如下面要给大家介绍的把文字压在边框上的效果。如下图所示。
神奇像素科技
2022/03/01
2.7K0
条码软件中如何在边框上添加文字
如何在 TypeScript 中为对象动态添加属性?
在 TypeScript 中,我们经常需要在运行时动态添加属性到对象上。这是因为 TypeScript 是一种静态类型语言,类型系统在编译时会检查代码的类型安全性,所以在编译时我们无法确定对象上将要添加哪些属性。在本文中,我们将讨论如何在 TypeScript 中为对象动态添加属性,以及这样做的一些注意事项。
网络技术联盟站
2023/06/07
11.8K0
如何在Eclipse中添加Tomcat的jar包
右键项目工程,点击Java Build Path 点击Add Library,选择Server Runtime 选择Tomcat版本 此时就看到拥有了Tomcat的jar包了
用户1154259
2018/01/17
2.8K0
如何在Eclipse中添加Tomcat的jar包
如何在WordPress中添加图片放大预览效果
这里分享一个如何在Wordpress中开启点击图片预览的功能。操作也非常的简单,只需要把下面的内容黏贴到对应的文件中即可。实际的效果预览
兔云小新LM
2023/09/11
3850
如何在WordPress中添加图片放大预览效果
gRPC: 如何在 gRPC 服务中自动添加 RequestId?
本文将介绍如何在 gRPC 微服务中,为每一个 API 自动添加 RequestId 。
尹东勋
2021/10/17
2.6K0
gRPC: 如何在 gRPC 服务中自动添加 RequestId?
在CentOS(Linux)中添加单个IP和批量添加多个IP地方法
在/etc/sysconfig/network- s/中新建文件ifcfg-eth0:*,*为数字序号,多个IP则依次增大 以0为例,建立文件ifcfg-eth0:0
雾海梦曦
2022/11/14
3.7K0
在CentOS(Linux)中添加单个IP和批量添加多个IP地方法
1、普通方法: 在/etc/sysconfig/network- s/中新建文件ifcfg-eth0-range0
Inkedus
2020/04/16
4.6K0
如何在前端应用中合并多个 Excel 工作簿
SpreadJS是纯前端的电子表格控件,可以轻松加载 Excel 工作簿中的数据并将它们呈现在前端浏览器应用的网页上。
葡萄城控件
2023/10/11
2930
如何在前端应用中合并多个 Excel 工作簿
点击加载更多

相似问题

Excel:创建新行并进行内插

27

插入缺失数据的行并进行内插

30

AngularJS将数组内插到字符串内指令

10

Rails -将变量传递给字符串内插

34

内插内插字符串中的格式字符串

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文