AngularJs ng-repeat只顯示第一個元素

Question

我是Angular的新手，我無法弄清楚爲什麼ng-repeat只顯示我的對象中的第一個元素。

這裏是我的HTML

<div ng-app="GroupApp"> 
<div ng-controller="GroupCtrl"> 
<div id="divEditRow" class="row"> 
    <div class="col-lg-8" ng-repeat="data in editGroups track by $index"> 
      <div class="input-group input-group-lg" > 
       <input class="form-control input-lg" ng-model="data[$index].GroupName" /> 
       <span class="input-group-btn"> 
        <button type="button" class="btn btn-info btn-flat"><i class="fa fa-pencil"></i></button> 
        <button type="button" class="btn btn-danger"><i class="fa fa-trash"></i></button> 
       </span> 

      </div> 
    </div> 
    </div> 
    </div> 
</div> 

這裏是我的angularjs：

var app = angular 
     .module('GroupApp', []) 
     .controller('GroupCtrl', function ($scope, AddGroup, $http) { 
      var id_generator = function (id) { 
       return id + 1 
      } 
      $scope.groups = [{ 'id': 1, 'name': '' }]; 
     // $scope.editGroups = new Array(); 
      $http.get("/Group/GetGroups") 
       .success(function (data) { 
        $scope.editGroups = data; 
       }); 
}) 

我知道寫作時{{數據}}在屏幕上的數據被檢索到正確的B/C ，將返回以下內容：

[{"CompetencyGroupID":52,"GroupName":"Quality Control","CreateDateTime":"/Date(1470675542267)/","CreateUserId":137,"ModifiedDateTime":null,"ModifiedUserID":null},{"CompetencyGroupID":53,"GroupName":"Quality","CreateDateTime":"/Date(1470675715943)/","CreateUserId":137,"ModifiedDateTime":null,"ModifiedUserID":null},{"CompetencyGroupID":54,"GroupName":"adsf","CreateDateTime":"/Date(1470681237727)/","CreateUserId":137,"ModifiedDateTime":null,"ModifiedUserID":null}] 

這是我的C＃Co ntroller

public JsonResult GetGroups() 
    { 
     List<CompetencyGroup> groupList = new List<CompetencyGroup>(); 

     using (var db = new SSITrainingEntities()) 
     { 
      //return (from g in db.CompetencyGroups 
      //  select g).ToList(); 
      groupList = db.CompetencyGroups.ToList(); 
     } 
     var j = Json(new { Response = groupList }, JsonRequestBehavior.AllowGet); 
     return j; 
     //return groupList; 
    } 

我在做什麼錯在這裏？

Answer 1

您試圖以原始數組的形式訪問數據變量。數據變量是editGroups數組內的實際元素（在這種情況下爲對象）。您只需使用data.PropertyName即可訪問陣列中的每個對象。

注意：我已刪除HTTP調用，並直接使用的數據 提供。

var app = angular 
 
     .module('GroupApp', []) 
 
     .controller('GroupCtrl', function ($scope, $http) { 
 
     var data = [{"CompetencyGroupID":52,"GroupName":"Quality Control","CreateDateTime":"/Date(1470675542267)/","CreateUserId":137,"ModifiedDateTime":null,"ModifiedUserID":null},{"CompetencyGroupID":53,"GroupName":"Quality","CreateDateTime":"/Date(1470675715943)/","CreateUserId":137,"ModifiedDateTime":null,"ModifiedUserID":null},{"CompetencyGroupID":54,"GroupName":"adsf","CreateDateTime":"/Date(1470681237727)/","CreateUserId":137,"ModifiedDateTime":null,"ModifiedUserID":null}]; 
 
      var id_generator = function (id) { 
 
       return id + 1 
 
      } 
 
      $scope.groups = [{ 'id': 1, 'name': '' }]; 
 
     // $scope.editGroups = new Array(); 
 
      $scope.editGroups = data; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 

 
<div ng-app="GroupApp"> 
 
<div ng-controller="GroupCtrl"> 
 
<div id="divEditRow" class="row"> 
 
    <div class="col-lg-8" ng-repeat="data in editGroups track by $index"> 
 
      <div class="input-group input-group-lg" > 
 
       <input class="form-control input-lg" ng-model="data.GroupName" /> 
 
       <span class="input-group-btn"> 
 
        <button type="button" class="btn btn-info btn-flat"><i class="fa fa-pencil"></i></button> 
 
        <button type="button" class="btn btn-danger"><i class="fa fa-trash"></i></button> 
 
       </span> 
 

 
      </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

UPDATE：

基於你的C＃API控制方法，它好像你正在傳遞一個包含組的數組的對象稱爲響應。您可以刪除新的對象並直接傳入groupList var作爲第一個參數或更改成功回調以訪問Response屬性。

.success(function (data) { 
    $scope.editGroups = data.Response; 
});