CODEWITHSUNDEEP
stringangularjsvariablesdata-binding
user3676343
user3676343

Reputation: 3

angularjs data binding not working on string variable?

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>

Upvotes: 0

Views: 2093

Answers (3)

Krunal Patil
Krunal Patil

Reputation: 3676

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" ];
            };

Upvotes: 0

HeberLZ
HeberLZ

Reputation: 14103

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

Upvotes: 1

Mathew Berg
Mathew Berg

Reputation: 28750

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.

Upvotes: 0

Related Questions