Angularjs won't bind scope variable with function?

Question

Angular doesn't seem to bind my scope variable on load and when I change the select option. I have the currently selected id from the select element, and I want to display the name next to it:

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
      <select ng-model="myid" ng-options="c.id as c.name for c in cs"></select>

       <span ng-bind="getName(myid)"></span>

  </div>
</div>

function TodoCtrl($scope) {
    $scope.myid = 1;
    $scope.cs = [ {id:1, name:'one'},
                 {id: 2, name:'two'},
                 {id: 3, name: 'three'}];
    $scope.getName = function(id) {
        angular.forEach($scope.cs, function(c, index) {
           if(c.id == id)
               return c.name
        });

        return "NULL";
    }
}

jsfiddle

Why does the span not update with my scope variable? It's always null when first loading and on any select changes.

Dayan Moreno Leon · Accepted Answer · 2015-01-23 04:10:50Z

0

your problem lies in your getName function take a lookt a this fiddle

http://jsfiddle.net/nwtjdffc/

basically i just replace your function with

$scope.getName = function(id) {
   return ($scope.cs.filter(function(item){ 
       return item.id==id})[0]||{}).name
}

answered Jan 23, 2015 at 4:10

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

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

2 Comments

fanhats Over a year ago

Why does my forEach() not return the name? I thought it would exit the getName() with my name string.

Dayan Moreno Leon Over a year ago

you are always returning NULL in your function you are only returning the name on your foreach callback, but that functions result doesn't propagate to your current function, here is how your foreach could be used jsfiddle.net/mxvaqfs3

Collectives™ on Stack Overflow

Angularjs won't bind scope variable with function?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related