CODEWITHSUNDEEP
javascriptjsonangularjs
Abhishek
Abhishek

Reputation: 3068

Angular ng-bind displaying 'object instead of value

I have an angular app where i am getting data from a service as follows:

angular.module('jsonService', ['ngResource'])
    .factory('MyService',function($http) {
        return {
            getItems: function(profileid,callback) {
                $http.get('/api/myapp/'+profileid+'/').success(callback);
            }
        };
    });

My controller app.js is as follows:

var app = angular.module('myapp', ['ui.bootstrap', 'jsonService']);
    app.controller('mycontroller', function(MyService, $scope, $modal, $log, $http) {
        $scope.profileid=3619;

        MyService.getItems($scope.profileid,function(data){
            $scope.profiledata = data;
        });
    });

The json object i get in the data looks as follows:

[
    {
        "profile_id": 3619, 
        "student_id": "554940", 
        "first_name": "Samuel", 
        "last_name": "Haynes"
    }
]

When i am trying to display these values in a textbox, i do not the the value in it. Instead i get a [object Object] . This is how i am calling the ng-bind in the html doc:

<label for="sid">Student ID</label>
<input type="text" class="form-control" ng-model="profiledata" ng-bind="{{profiledata.student_id}}" />

How do i display the values from the json object?

Upvotes: 1

Views: 2261

Answers (1)

Mike Cheel
Mike Cheel

Reputation: 13106

Have a look at this simplified jsbin I made: http://jsbin.com/korufi/1/

Change your input to: 

<input type="text" class="form-control" ng-model="profiledata[0].student_id" />

ng-bind ends up making the input look like this:

<input type="text" class="form-control">554940</input>

which will not make the student id show up in the textbox. ng-model will.

Upvotes: 1

Related Questions