6

I'm having trouble with some basic angular databinding.

my view:

<select
    ng-model="selectedPerson"
    ng-options="person.name for person in testdataset"
    ng-change="personChanged(selectedPerson)">
    <option value="">All Persons</option>
</select>

my controller:

$scope.testdataset = [
    {name:"bill"},
    {name:"bob"},
    {name:"batman"}
];
$scope.personChanged = function(person) {
    console.log(person);
}

This works great--selected name is logged.

But this simply prints "undefined" when a name is selected

view:

<select
    ng-model="selectedPerson"
    ng-options="person.name for person in testdataset"
    ng-change="personChanged()">
    <option value="">All Persons</option>
</select>

controller:

$scope.testdataset = [
    {name:"bill"},
    {name:"bob"},
    {name:"batman"}
];
$scope.personChanged = function() {
    console.log($scope.selectedPerson);
}

I'm new to angular, and I'm just perplexed. I'm assuming it's got to do with the, er, "scope" of $scope inside the function, but I'm not sure how to troubleshoot...

6
  • I can't reproduce the problem, everything is just fine for me. Can you make a fiddle?
    – Blackhole
    Nov 30, 2013 at 0:09
  • 3
    There's nothing wrong with your code, check here: plnkr.co/edit/RvoF69SjWmqVKtyGO8PD Nov 30, 2013 at 0:09
  • do you have directives involved with isolated scopes that are wrapping the select or ancestors of select?
    – charlietfl
    Nov 30, 2013 at 0:15
  • Thx all, I see from the plunker @francisco provided I obviously have ok code. I should have tried that first before posting :( It's got to be the scoping. Of course it will take me a little time to strip the code down to something I can present here. I'm working on that now and will update with a complete example. It's likely simply doing that will make the answer obvious.
    – snuggles
    Nov 30, 2013 at 0:31
  • 1
    Still curious how it works in @francisco.preller example, but for me it started to work wraping selectedPerson into object, as described here: github.com/angular-ui/…
    – avalez
    May 15, 2014 at 21:05

1 Answer 1

2

It was mentioned in the comments already, but your selectedPerson is a member on A scope. Not nessisarily the scope of the controller ($scope). Depending on the rest of your page/application, the selectedPerson could be on a different scope. Say you use a ng-repeat outside/above (as a parent to your code displayed), then the selectedPerson will live as a member of that scope, NOT the scope of the controller.

The way scopes work is pretty straightforward though as it inherits from its parents. If you place something on the scope of the controller - it will be the outmost scope of that controller (the part of your html marked ng-controller) unless ofcourse that you have already nested that part inside another controller. Finally there is $rootScope which would the real out-most scope from which every other scope inherits from.

<div ng-controller="MainController">
    <div ng-repeat="item in items"> <!-- **This creates a new nested scope** -->
        <select ng-model="selectedPerson" ng-options="...">
        </select>
    </div>
</div>

Using the above template, whatever you put on $scope in your controller can be read in both the inner div and the select itself. The ng-model though can not be directly read in the controller though.

If you do this in your controller:

app.Controllers('MainController', function ($scope) {
  $scope.selectedPerson = {};
});

Then you will create a object on the outer scope and your ng-model will inherit and reference that same object. Beware though, that for each select inside your ng-repeat will be using the SAME selectedPerson.

I hope this explains why?

1
  • 1
    I can't honestly say if this would have solved my problem because soon after I posted this we switched from angular and I never actually needed to solve this, ha-ha. But thanks everyone for the help, sorry I can't contribute further to this.
    – snuggles
    Apr 10, 2016 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.