代码之家 › 专栏 › 技术社区 › Mani Kant Tiwari

如何对阵列中的对象应用ng repeat

single-page-application mongodb angularjs

Mani Kant Tiwari · 技术社区 · 8 年前

我正在做一个测验网络项目。这是 水疗中心 基于应用程序,使用angularjs,节点。js,mongodb。我将用户对象存储在mongodb中,如下所示。。。

{ "_id" : ObjectId("5ac11e238172b601087a6920"), "userid" : "lucy", "password" : "$2a$10$/o5ioD82//x5gWzweWQNI.8bBHSxEEj3AnqWXgoQXSltP.y5NFgUi", "questions" : [ { "qstn" : "b", "opt1" : "b", "opt2" : "b", "opt3" : "b", "opt4" : "b", "ans" : "b" }, { "qstn" : "j", "opt1" : "j", "opt2" : "j", "opt3" : "j", "opt4" : "j", "ans" : "j" }, { "qstn" : "hhhh", "opt1" : "hh", "opt2" : "hh", "opt3" : "hh", "opt4" : "hh", "ans" : "hh" } ], "__v" : 0 }
{ "_id" : ObjectId("5ac11e238172b601087a6920"), "userid" : "mani", "password" : "$2a$10$mGztF/S7hXyympOeunTiKOclTAKaTgBgzAkbsxIssFazwHxSq54um", "questions" : [ { "qstn" : "a", "opt1" : "b", "opt2" : "a", "opt3" : "a", "opt4" : "a", "ans" : "a" }, { "qstn" : "jj", "opt1" : "jj", "opt2" : "jj", "opt3" : "jj", "opt4" : "jj", "ans" : "jj" }, { "qstn" : "hhhh", "opt1" : "hh", "opt2" : "hh", "opt3" : "hh", "opt4" : "hh", "ans" : "hh" } ], "__v" : 0 }

当我询问时

fetchQuestions(request,response){
    User.find({},function(err,user){
        console.log(user);
    }).select('questions -_id').limit(10);
}

我在服务器控制台上得到了这个结果

[ 
 { questions: [ [Object], [Object], [Object] ] },
 { questions: [ [Object], [Object], [Object] ] }
]

我的测试。html,用于打印问题及其选项

<div>
<h1>{{qstn}}</h1>
<input type="checkbox">
<h1 ng-repeat="">{{opt1}}</h1><br>
<input type="checkbox">
<h1 ng-repeat="">{{opt2}}</h1><br>
<input type="checkbox">
<h1 ng-repeat="">{{opt3}}</h1><br>
<input type="checkbox">
<h1 ng-repeat="">{{opt4}}</h1>

知道如何在网页上的数组中打印这些问题吗如何应用 ng重复 打印问题及其选项

2 回复 | 直到 8 年前

acesaft Muhammad Usman 8 年前

您可以而且我会在代码中说“应该”。

1-在后端。您应该使用 User.find({},{ questions: 1},function(err,user){..

这将返回一个包含以下内容的文档 _id 和 questions 仅限属性。

现在,当您在前端成功接收到此数据时,显示问题

您应该尝试以这种方式渲染

<div ng-repeat="data in response">      
  <div ng-repeat="qustion in data.questions">
    <h1>{{qstn}}</h1>
    <input type="checkbox">
    <h1 >{{opt1}}</h1><br>
    <input type="checkbox">
    <h1>{{opt2}}</h1><br>
    <input type="checkbox">
    <h1 >{{opt3}}</h1><br>
    <input type="checkbox">
    <h1 >{{opt4}}</h1>
  </div>
<div>

khateeb 8 年前

您可以在ng repeat中用作:

<div ng-repeat="question in users.questions">      
  <div ng-repeat="q in question">
   <h1>{{q.qstn}}</h1>
   <input type="checkbox">
   <h1 >{{q.opt1}}</h1><br>
   <input type="checkbox">
   <h1>{{q.opt2}}</h1><br>
   <input type="checkbox">
   <h1>{{q.opt3}}</h1><br>
   <input type="checkbox">
   <h1 >{{q.opt4}}</h1>
 </div>
</div>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前