javascript - AngularJS，使用 Rest 服务，该服务以 Array<Object> 进行响应。如何在表格中显示这一点？

Question

如何放置此 Rest Json 响应:

[
      {
      "Attribute1": 1,
      "Attribute2": "1",
      "Attribute3": "example",
      "Attribute4": "12345",
      "Attribute5": "example example",
      "Attribute6: "20/10/2015",
      "Attribute7": "2015-11-13"
   },
           {
      "Attribute1": 7,
      "Attribute2": "5",
      "Attribute3": "example",
      "Attribute4": "12345",
      "Attribute5": "example example",
      "Attribute6: "20/10/2015",
      "Attribute7": "2015-11-13"
   },
         {
      "Attribute1": 2,
      "Attribute2": "3",
      "Attribute3": "example",
      "Attribute4": "12345",
      "Attribute5": "example example",
      "Attribute6: "20/10/2015",
      "Attribute7": "2015-11-13"
   }
]

我通过在 angularjscustom.js 中的这个函数中调用 http.get 得到:

$scope.getCalls = function() {  
        $scope.ObjectList = [$http.get("http://localhost:8080/test/test2/test4?uname=" + scope.uname + "&passwort=" +scope.password)];

到此index.html 文件中的表:

<table class="table table-hover table-striped">
    <thead>
        <tr>
            <th> Attribut1 </th>
            <th> Attribut2 </th>
            <th> Attribut3 </th>
            <th> Attribut4 </th>
            <th> Attribut5 </th>
            <th> Attribut6 </th>
        </tr>
    </thead>
    <tbody>

    <tr data-ng-repeat="Object in ObjectList">
                            <td>{{ Object.Attribut1}}</td>
                            <td>{{ Object.Attribut2 }}</td>
                            <td>{{ Object.Attribut3 }}</td>
                            <td>{{ Object.Attribut4 }}</td>
                            <td>{{ Object.Attribut5 }}</td>
                            <td>{{ Object.Attribut6 }}</td>
                            <td>{{ Object.Attribut7 }}</td>
                        </tr>
                    </tbody>
                </table>        

此外，我还希望能够单击复选框来获取对属性 1 的引用，例如......我不知道如何执行此操作。也许有人可以以正确的方式指导我？我没有 AngularJs 或 Javascript 经验。

Answer 1

你的模块和 Controller 。

 var app = angular.module("example",[]);
 app.controller("sampleController","$scope","$http",
    function($scope,$http){
       $http.get("/api/some/getList")
         .success(function(data){
              //data properties: firstName , lastName

              //add is check property for checkbox
              angular.forEach(data,function(item){
                 item.isCheck = false;
              });
              $scope.items = data;
          })
         .error(function(exp){
              alert(exp);
          });
          $scope.selectedItems = [];
          $scope.checkChange = function(item){
               item.isCheck = !item.isCheck;                   
          }
          $scope.getSelected = function(){
             var selectedItems = [];
             angular.forEach($scope.items,function(item){
                  if(item.isCheck){
                     selectedItems.push(item);
                  }
             });
             //you have checked items in selectedItems variable.
          }
    }]);

html 页面:

     <table>
         <thead>
             <tr>
               <th></th>
               <th>First Name</th>
               <th>Last Name</th>
             </tr>
         </thead>
         <tbody>
             <tr ng-repeat="item in items track by $index">
                <td> 
                   <input type="checkbox" ng-model="item.isCheck" ng-change="checkChange(item)"/>
                </td>
                <td ng-bind="item.firstName"></td>
                <td ng-bind="item.lastName"></td>
             </tr>
         </tbody>
     </table>