如何使用angularjs以表格格式显示parse.com的查询结果

时间:2015-03-03 13:32:58

标签: javascript angularjs html5 twitter-bootstrap-3 parse-platform

     /*student.html*/
     <!DOCTYPE html>
     <html ng-app="">
    <head>
  <link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


  <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">    </script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
 <script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src= "students.js"></script>
</head>

<body >
  <div class="container" ng-controller="userController">

  <h3>Students</h3>

   <table class="table table-striped">
  <thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr></thead>
  <tbody><tr ng-repeat="user in users">
  <td>
  <button class="btn" ng-click="editUser(user.id)">
  <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
  </button>
</td>
<td>{{ user.firstname}}</td>
<td>{{ user.lastname }}</td>
<td>{{ user.age }}</td>
   </tr></tbody>
 </table>

<hr>
 </div>
</body>
  </html>

请帮帮我我是angularjs的新手,也是第一次使用解析。我在使用角度的ng-repeat显示查询结果(这是一个对象数组)时遇到了困难。遇到过同样的人问题,请提供你的答案..

/*stduents.js*/
function userController($scope) {
var users=[];
Parse.initialize("parseid", "jskey");//parseid and jskey are given in my parse.com account
var student=Parse.Object.extend("student");//student is a class in parse.com
var query=new Parse.Query(student);
query.equalTo("userid",Parse.User.current());
query.find({
success:function(results) {
alert("success");
for(var i=0;i<results.length;i++)
{
 var object= results[i];
users.push({'firstname':object.get('firstname') , 'lastname':object.get('lastname') ,'age':object.get('age')});

}

},
 error:function(error) {
 alert("error:"+ error.code +" "+error.message);
 }
});

2 个答案:

答案 0 :(得分:2)

简单使用ng-repeat

示例数组

var arr = [
    {id: 1},
    {id: 2},
    {id: 3}
]

示例用法

<span ng-repeat="obj in arr">{{obj.id}}</span>

这会给你

123

Fiddle

我建议您阅读Docs

答案 1 :(得分:-1)

将student.js中的第三行改为$ scope.users = [];