如何在数组中的对象上应用ng-repeat

时间:2018-04-10 11:57:40

标签: angularjs mongodb single-page-application

我正在开展一个测验网络项目。哪个是基于 SPA 的应用程序,使用angularjs,Node.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] ] }
]

我的test.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-repeat 打印带有选项的问题

2 个答案:

答案 0 :(得分:1)

你可以而且我会在你的代码中说“应该”一些东西。

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

这将返回仅包含_idquestions属性的文档。

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

你应该尝试这样渲染

<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>

答案 1 :(得分:1)

你可以在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>