AngularJS，使用以 Array<Object> 响应的 Rest 服务。如何在 Table 中显示？

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 :

<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

你的模块和控制器。

 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>

AngularJS，使用以 Array<Object> 响应的 Rest 服务。如何在 Table 中显示？

AngularJS, consuming a Rest Service which response with a Array<Object> . How to show this in a Table?

javascript

rest

html-table

response

angularjs