AngularJS change scope variable on ng-click

Question

I try to set a scope variable within a template on ng-click and later read it in the controller. Example:

HTML:

<section id="editCtrl" data-ng-controller="EditCtrl as edit">
    {{ edit.myVar = []; "" }}
    Click the following buttons:<br>
    <span data-ng-click="edit.myVar['entry'] = 'test'">Click me</span>
    <span data-ng-click="edit.showMyVar();">Show MyVar in console</span>
</section>

JS:

// This controller is just for the example - I would never add a controller variable within the template
var app = angular.module("app", []);
app.controller("EditCtrl", function(){
    var edit = this;
    edit.showMyVar = function(){
        console.log(edit.myVar);
    };
});

However the variable "edit.myVar" keeps beeing an empty array. What am I doing wrong? In my interpretation this is a valid ng-click expression.

Live example: JSFiddle

ngLover · Accepted Answer · 2015-07-24 13:06:23Z

2

There are couple of changes you have to do --

You can not keep an assignment code in {{ }} since this code renders frequently . so you will not get the actual value.

Working plunker..

    <!DOCTYPE html>
<html >

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
    <style>span:nth-of-type(1){background:yellow;}
      span:nth-of-type(2){background:red;}</style>
  </head>

  <body>
    <section id="editCtrl" ng-controller="EditCtrl as edit">
    Click the following buttons:<br>
    <button ng-click="edit.myVar['entry']='test'">Click me</button>
    <button ng-click="edit.showMyVar()">Show MyVar in console</button>
      </section>
      <script>angular.bootstrap(document, ['app'])</script>
  </body>

</html>

Js file

 // This controller is just for the example - I would never add a controller variable within the template
var app = angular.module("app", []);
app.controller("EditCtrl", function(){
    var edit = this;
    edit.showMyVar = function(){
        alert(JSON.stringify(edit.myVar));
    };
});

Problems with your code :

You can not keep an assignment code in {{ }} since this code renders frequently . so you will not get the actual value.
one more problem at my end before loading document app was bootstraping.

edited Jul 24, 2015 at 13:06

answered Jul 24, 2015 at 11:48

ngLover

4,6183 gold badges24 silver badges42 bronze badges

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

8 Comments

dude Over a year ago

Is it necessary to use the brackets in ng-click?

ngLover Over a year ago

fiddle could not be forked you can check snippet added @julmot

dude Over a year ago

This is the working fiddle link with your solution: jsfiddle.net/ug9j9ome/1

dude Over a year ago

Thank your for your help! Finally could you please reply to my question?

dude Over a year ago

I can not assign any variable without brackets but I can call a function without? This seems to be strange for me...

|

Sudharsan S · Accepted Answer · 2015-07-24 12:31:23Z

1

Initialize edit.myVar = {'entry' : ''}; in controller first like this

var app = angular.module("app", []);
app.controller("EditCtrl", function(){
    var edit = this;
    edit.myVar = {'entry' : ''};; // initailize the array here
    edit.showMyVar = function(){
        console.log(edit.myVar);
    };
});
angular.bootstrap(document, ['app']);

Note:

first click on the 'click me' span and value is set into the array and click on the next span for your console it. your console only works on clicking edit.showMyVar(); function

Fiddle

edited Jul 24, 2015 at 12:31

answered Jul 24, 2015 at 11:42

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

2 Comments

dude Over a year ago

This does not work in Firefox because it should be an object instead of an array.

Sudharsan S Over a year ago

@julmot - I update my answer it will work on all browsers\

Mansi Parekh · Accepted Answer · 2015-07-24 11:42:41Z

-1

Try this

<section id="editCtrl" ng-init="edit.myVar = [];" data-ng-controller="EditCtrl as edit">
Click the following buttons:<br>
<span data-ng-click="edit.myVar['entry'] = 'test'">Click me</span>
<span data-ng-click="edit.showMyVar();">Show MyVar in console</span>

Update: I think your object was getting initialized again and again. I used ng-init method so it will initialize object only once.

edited Jul 24, 2015 at 11:42

answered Jul 24, 2015 at 11:37

Mansi Parekh

5192 silver badges13 bronze badges

2 Comments

dude Over a year ago

This does not change anything. Also you should explain why this would solve the problem,

Mansi Parekh Over a year ago

I have edited my comment. I hope you have tried this solution.

Collectives™ on Stack Overflow

AngularJS change scope variable on ng-click

3 Answers 3

8 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related