CODEWITHSUNDEEP
angularjs
James Satori-Brunet
James Satori-Brunet

Reputation: 901

AngularJS: Why isn't my ng-model getting updated?

In this code I am successfully getting a response from the server but can't seem to get the values to show up in my ng-model.

I have tried every kind of way to access the object but thought that the syntax Object.attribute was correct. Am I mistaken?

<html ng-app="notesApp">
<head><title>Notes App</title></head>
 <body ng-controller="MainCtrl as ctrl">
<div>
   <h2>Job Inspections?</h2>


<div class="input-group">
    <label>Inspection ID</label>
    <input type="text" ng-model="ctrl.list.id">
</div>
<div class="input-group">
    <label>Inspection ID2</label>
    <input type="text" ng-bind="ctrl.list.id">
</div>
<div class=
<div class="input-group">
    <label>Job ID</label>
    <input type="text" ng-model="ctrl.list.job_id">
</div>
<div class="input-group">
    <label>Inspection Type</label>
    <input type="text" ng-model="ctrl.inspection_type">
</div>
<div class="input-group">
    <label>Bodywork</label>
    <input type="checkbox"
           ng-checked="ctrl.bodywork === 1">
</div>
<div class="input-group">
    <label>Lighting</label>
    <input type="checkbox"
           ng-checked="ctrl.lighting === 'YES'">
</div>

 </div>

<script
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
 angular.module('notesApp', [])
.controller('MainCtrl', ['ItemService', function(ItemService) {
var self = this;
self.list = function() {
  return ItemService.list().then(function(data) {

    console.log(data);
    return data;
    })
}();

//console.log(self.list);
self.add = function() {
  ItemService.add({
    id: self.list().length + 1,
    label: 'Item ' + self.list().length
  });
};

  }])
  .factory('ItemService', ['$http', function($http) {




return {
    list: function() {

        return $http.get('/api_job_inspections/1/edit').then(function(response) {
                    return response.data;
                  }, function(errResponse) {
                    console.error('Error while fetching notes');
                  });

        },
      add: function(item) {
        self.items.push(item);
      }
    };

}]);

</script>
</body>
</html>

As per usual, thank you in advance.

Upvotes: 0

Views: 56

Answers (1)

Shomz
Shomz

Reputation: 37691

You should update the object in your callback function every time you manipulate the data: 

return ItemService.list().then(function(data) {
    self.list = data;
})

Also make sure that data is what you expect it to be.

Upvotes: 1

Related Questions