0

I'm using ionic framework to build an app. In my form i need to re-populate the dynamic ng-model input field. I refer " How to create Dynamic ng-model in Angular " to create the dynamic ng-model field. it works. But when i'm trying to re-populate that field it was not working (I need to perform CRUD opearation).

My HTML part is:

<div class="row header">
  <div class="col col-40">Name</div>
  <div class="col col-60">Marks</div>
</div>

<div class="row" ng-repeat="(key, user) in userList">
  <div class="col col-40" ng-bind="user.name"></div>
  <div class="col col-60">
    <input type="text" name="actual_marks" ng-model="markscardData.actual_marks[user.user_id]" placeholder="Please enter the marks" />
  </div>
</div>

My controller is like this

.controller('MarkscardAddCtrl', function($scope, $stateParams, $state, $http, $ionicPopup, baseUrl) 
{
  $scope.markscardData = {};


  $http.get(baseUrl+"api_method=markscard.getUserList&api_version=1.0&app_key=12345&  course_id="+course+"&subject_id="+subject+"&  markscard_id="+markscard).then(function(response){
  $scope.userList = response.data.responseMsg;
  });  
})

The JSON value in $scope.userList like this

  [{"name":"Harshith","user_id":"249","actual_marks":"76","min_marks":"40","max_marks":"100"},{"name":"Nithin","user_id":"246","actual_marks":"60","min_marks":"40","max_marks":"100"},{"name":"Prathik","user_id":"247","actual_marks":"70","min_marks":"40","max_marks":"100"},{"name":"Ravee","user_id":"250","actual_marks":"80","min_marks":"40","max_marks":"100"},{"name":"Shivarama","user_id":"248","actual_marks":"90","min_marks":"40","max_marks":"100"}]

I need markscardData.actual_marks[user.user_id] repopulate when form is open in edit mode and it allow update also. Please help me on this. Thanks in advance.

Community
  • 1
  • 1
Sam
  • 149
  • 4
  • 15
  • You're missing a lot of code in your controller, there are variables that simply aren't defined, the model is not created, we need the whole example – Shannon Hochkins May 26 '16 at 06:59

2 Answers2

1

I assume you are losing data when you reload the page. This is happening because the dynamic ng-models are not actually bound in your controller. If you want to load actual marks from the JSON you received,

for(var i in userList){
    $scope.markscardData.actual_marks[userList[i].user_id] = userList[i].actual_marks;
}

put this line below $scope.userList = response.data.responseMsg;. This should initialize your dynamic models if applicable. Also, you will need to put these two declarations at the start: $scope.markscardData = {}; $scope.markscardData.actual_marks = []; Hope this works for you .. :)

seekers01
  • 560
  • 1
  • 4
  • 11
  • Thanks for the answer. Its works for me. Now the code is $scope.markscardData = {}; $scope.markscardData.actual_marks = []; $http.get(baseUrl+"api_method=markscard.getUserList&api_version=1.0&app_key=12345&course_id="+course+"&subject_id="+subject+"&markscard_id="+markscard).then(function(response){ $scope.userList = response.data.responseMsg.result; for(var i in $scope.userList){ console.log($scope.markscardData.actual_marks[$scope.userList[i].user_id] = $scope.userList[i].actual_marks); } }); and same html – Sam May 26 '16 at 09:12
0

I'm not actually sure what you're issue as as the code you've provided with the code in the response should work fine:

Assuming you're just trying to update the values of the fields, then I'd create a method that you can call, with the array of users as it's parameter, and then mess with the model you've created called markscardData.

this.markscardData = {
   actual_marks  : {}
}
this.updateList = function(newList) {
   angular.forEach(newList, function(user) {
        if (!user || !user.user_id) return;     
        ctrl.markscardData.actual_marks[user.user_id] = user.actual_marks;
   });
}

DEMO: https://jsfiddle.net/qvw9bmhe/35/

Shannon Hochkins
  • 11,763
  • 15
  • 62
  • 95
  • Thanks for the reply. I see the jsfiddle you created. But ng-model="markscardData.actual_marks[user.user_id]" field is not re-populated. – Sam May 26 '16 at 08:24
  • Have you clicked the button 'update', it update the value of the first field from the `updatedList` array – Shannon Hochkins May 26 '16 at 08:56
  • Sorry i'm not noticed. Thanks for giving extra knowledge on this. I mean in update the form field. I'm just started working with angulajs with ionic framework. thanks for the reply – Sam May 26 '16 at 09:23
  • If my answer has helped you please tick the button above making my answer the correct answer – Shannon Hochkins May 26 '16 at 09:57
  • definitely it help me. – Sam May 26 '16 at 10:06