binding returned value from JavaScript function to ng-model

Question

im trying to get returned value from function and display it using ng-model but column is empty and no error on log. the value should be the max score in the users array (highest score :46). any idea why isn't it working?

HTML:

<div ng-controller="firstCtrl">
    <table class="table table-hover">
        <thead>
        <td>Name</td>
        <td>Score</td>
        <td>Difference</td>
        </thead>
        <tr ng-repeat="user in users | orderBy: '-score'">
            <td >{{user.name}}</td>
            <td >{{user.score}}</td>
            <td ng-model="maxScore">{{max}}</td>
        </tr>
    </table>
</div>

JS:

var myApp = angular.module("myApp",[]);

myApp.controller ('firstCtrl', function($scope, PersonService){

$scope.users = PersonService.list();
$scope.maxScore = function(users){
    PersonService.getMaxScore(users);
}
})

myApp.service('PersonService',function(){

var uid = 1;
var users = [{
    id: 0,
    'name': 'John',
    'score': 46
},{
    'name': 'Harry',
    'score': 45
},{
    'name': 'Sam',
    'score': 32
}];

this.list = function () {
    return users;
}

this.getMaxScore = function (arr) {
    var max;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].score > (max || 0))
            max = arr[i].score;
    }
    return max;
}
})

Try throwing some console.log() messages throughout the process chain to see where its failing. — jwimmer
– jwimmer, Commented Jan 9, 2015 at 18:34

dhavalcengg · Accepted Answer · 2015-01-09 18:48:15Z

1

Checkout this plnkr

first you are not calling as method. And second you are not returning from method.

Change your html to following

<div ng-controller="firstCtrl">
    <table class="table table-hover">
        <thead>
        <td>Name</td>
        <td>Score</td>
        <td>Difference</td>
        </thead>
        <tr ng-repeat="user in users | orderBy: '-score'">
            <td >{{user.name}}</td>
            <td >{{user.score}}</td>
            <td>{{maxScore(users)}}</td>
        </tr>
    </table>
</div>

edited Jan 9, 2015 at 18:48

answered Jan 9, 2015 at 18:32

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Al.s Over a year ago

great tip in general but unfortunately still doesn't work after changed to integer

dhavalcengg Over a year ago

updated my answer. follow the link in answer plnkr.co/edit/MLfaLQzaLBQwlxqmJcj5?p=preview

Collectives™ on Stack Overflow

binding returned value from JavaScript function to ng-model

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related