i'm new angular, , can't quite figure out why ng-repeat displaying first element object.
here 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 $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> here 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; }); }) i know data being retrieved correctly b/c when writing {{ data }} screen, following returned:
[{"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}] this c# controller
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; } what doing wrong here?
you trying access data variable original array. data variable actual element (object in case) inside editgroups array. can access each object within array using data.propertyname.
note: have removed http call , directly used data provided.
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 $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:
based on c# api controller method, seems passing in object called response contains array of groups. can either remove new object , directly pass in grouplist var first argument or change success callback access response property.
.success(function (data) { $scope.editgroups = data.response; }); 
Comments
Post a Comment