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です。コントローラ

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