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; 
       }); 
}) 

Я знаю, что данные были получены правильно б/с при записи {{данные}} на экране , возвращается следующее:

[{"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:

на основании метода # API контроллера C, похоже, вы передаете в объект называется ответ, который содержит множество групп. Вы можете либо удалить новый объект, либо напрямую передать в groupList var в качестве первого аргумента или изменить свой обратный вызов успеха, чтобы получить доступ к свойству Response.

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