Setting $scope variables AngularJS

Question

So i am having an issue with adding a variable to the $scope after an event. Here is the HTML for the select box. Basically when it is changed i need the scope to change.

Index.html

<select ng-controller="ClientCtrl" ng-model="name" 
ng-options="v.name for (k, v) in client" ng-change="selectChange(name)">
</select>

<h2>{{cName}}</h2>
<p>Age: {{cAge}}</p>
<p>Notes: {{cNotes}}</p>

Controller.js

$scope.selectChange = function(name){
    $scope.cName = name.name;
    $scope.cAge = name.age;
    $scope.cNotes = name.notes;
  };

I have tried a few things to get those variable set. Obviously this one above, then this one:

$scope.selectChange = function(name){
        $scope.cName = name.name;
        $scope.cAge = name.age;
        $scope.cNotes = name.notes;
        $scope.$apply();
  };

I still don't quite understand apply but i thought i'd give it a try. Any help would be awesome, just need a pointer to wrap my head around why this wouldnt work.

I can get the variables to post to the console.log(cName); but it won't show up when i have the {{cName}}

This was also an issue that was answered by @StenMuchow.

RickyRoller
– RickyRoller

2014-04-16 14:12:52 +00:00
Commented Apr 16, 2014 at 14:12 — RickyRoller
– RickyRoller, Commented Apr 16, 2014 at 14:12

thsorens · Accepted Answer · 2014-04-15 20:09:11Z

0

You actually dont have to pass in the name in the ng-change event, since you actually already have that in the scope. The changeEvent can the use $scope.name directly instead of passing it as a parameter.

ng-change="selectChange()"

js

$scope.selectChange = function(){
    $scope.cName = $scope.name.name;
    and so on.  
};

id suggest you give it a better name than name, i guess were talking about a person, so it would be easier to read if you call it Person.Name and so on;)

You also need to wrap your print within the same controller as you now have name in, to make it work, since the scope gets created for the controller.

answered Apr 15, 2014 at 20:09

thsorens

1,32812 silver badges21 bronze badges

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

1 Comment

RickyRoller Over a year ago

Alright so i applied this and it fixed things up great! I definitely should have thought of that, i was following a change function i found somewhere else but now that you say that it makes more sense to do it this way. Here is a plunker with this working. Thanks! :D PLUNKER

Sten Muchow · Accepted Answer · 2014-04-15 20:01:00Z

0

Without more info its hard to debug completely, but from what i can see i would recommend wrapping the entire piece of html in the controller ClientCtrl or else the h2 and p tags wont have access to the scope that it creates.

<div ng-controller="ClientCtrl">
  <select ng-model="name" ng-options="v.name for (k, v) in client" ng-change="selectChange(name)">
  </select>

  <h2>{{cName}}</h2>
  <p>Age: {{cAge}}</p>
  <p>Notes: {{cNotes}}</p>
</div>

Hope this helps otherwise post more info or use a plunker...

answered Apr 15, 2014 at 20:01

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

1 Comment

RickyRoller Over a year ago

I have the h2 and p's in the ng-view with the ClientCtrl on them but i definitely should have depicted that in my question. I displayed it the way you stated in the plunker for clarification, thanks!

Collectives™ on Stack Overflow

Setting $scope variables AngularJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related