AngularJs ng-repeat는 첫 번째 요소 만 표시합니다.

Question

저는 Angular를 처음 사용하기 때문에 ng-repeat에서 왜 내 개체의 첫 번째 요소 만 표시하는지 알 수 없습니다. 여기

는 여기

<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와 내 HTML입니다 :

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 관리자

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 컨트롤러 방법을 기반으로 보인다. 새 Object를 제거하고 groupList var를 첫 번째 인수로 직접 전달하거나 성공 콜백을 변경하여 Response 속성에 액세스 할 수 있습니다.

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