angularjs data binding not working on string variable?

Question

I have 2 versions of my code, one is not working and the other it is. My question is "why the not working one is not working?" here is the JSfiddle http://jsfiddle.net/fhjF7/

The not working version: Controller:

function Ctrl($scope) {
    $scope.username = "username";
    $scope.users = [ "Matteo", "Marco", "Michele" ];
};

HTML:

<h1> Not working example</h1>
<div ng-controller="Ctrl">
    <div ng-repeat="user in users">
        <input type="radio" ng-model="username" name="usern" ng-value="user" />
        <strong>{{user}}</strong>
    </div>
    <div>selected: {{username}}</div>
</div>

and here is the working one, which is almost identical but replacing the string variable with an object: Controller:

function usersCtrl($scope) {
    $scope.names = {username: "username"};
    $scope.users = [ "Matteo", "Marco", "Michele" ];
};

HTML:

<h1> Working example</h1>
<div ng-controller="usersCtrl">
    <div ng-repeat="user in users">
        <input type="radio" ng-model="names.username" name="username" ng-value="user" />
        <strong>{{user}}</strong>
     </div>
     <div>selected: {{names.username}}</div>
</div>

HeberLZ · Accepted Answer · 2014-05-26 13:02:57Z

1

It is because of the way javascript manages function parameters.

The easy way to understand it is that String, Number, and Boolean parameters are always sent byValue, while Objects and Functions are always sent byRef, that is why when you use the dot inside an ng-model it means you are doing a reference to an object which will propagate, while if you don't use a dot inside the ng-model, you are referencing a String, Number or Boolean which is actually a copy of the real variable.

More information here https://egghead.io/lessons/angularjs-the-dot and https://github.com/angular/angular.js/wiki/Understanding-Scopes

answered May 26, 2014 at 13:02

HeberLZ

14.2k4 gold badges25 silver badges24 bronze badges

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

1 Comment

user3676343 Over a year ago

that's a great explanation, it makes it clear now :-)

Mathew Berg · Accepted Answer · 2014-05-26 13:00:52Z

0

Ng-repeats create their own isolate scopes, so that's why the string is not being preserved as it's not pass by reference. If you want to update the model use

<input type="radio" ng-model="$parent.username" name="usern" ng-value="user" />

$parent gives you access to the parents scope which is outside the ng-repeat and should be the one you want.

answered May 26, 2014 at 13:00

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

1 Comment

user3676343 Over a year ago

that works!, instead of using a copy of the variable inside the ng-repeat scope it uses the one defined by the parent scope, in other words it forces to pass the string variable by reference...

Krunal Patil · Accepted Answer · 2014-05-26 13:26:11Z

0

The answer for your not working code : http://jsfiddle.net/ashuslove/fhjF7/30/

HTML :

 <h1> Not working example</h1>
    <div ng-controller="Ctrl">
         <div ng-repeat="user in users">
              <input type="radio" ng-model="names.usern" name="usern" ng-value="user" />
              <strong>{{user}}</strong>
          </div>
          <div>selected: {{names.usern}}</div> //Changed line here
    </div>

The function :

  function Ctrl($scope) {
                $scope.names = {usern: "usern"};  //Also need to change this
                $scope.users = [ "Matteo", "Marco", "Michele" ];
            };

answered May 26, 2014 at 13:26

Krunal Patil

3,6745 gold badges24 silver badges28 bronze badges

Collectives™ on Stack Overflow

angularjs data binding not working on string variable?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related