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

我知道在将{{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＃控制器

 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调用并直接使用了数据提供。

＆＃13;

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

＆＃13;

<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>

＆＃13;

<强>更新

基于您的C＃API控制器方法，您似乎传递了一个名为response的对象，其中包含组数组。您可以删除新的Object并直接传入groupList var作为第一个参数，也可以更改成功回调以访问Response属性。

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

AngularJs ng-repeat仅显示第一个元素

1 个答案: