AngularJS change scope variable to ng-click
I am trying to set a scope variable in a template to ng-click
and then read it in a 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 "edit.myVar" variable keeps an empty array. What am I doing wrong? In my interpretation, this is a valid ng-click expression.
Live example: JSFiddle
source to share
There are several changes you need to make -
You cannot store the destination code in
{{ }}
, as this code displays frequently. so you won't get the actual value.
<!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="angular.js@1.4.x" 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));
};
});
Code problems:
- You cannot save the destination code to
{{ }}
, as this code is often displayed. so you won't get the actual value. - another problem on my end before loading the document app was bootable.
source to share
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" space and the value will be set to an array and click on the next range for your console. only the console works when the
edit.showMyVar();
function is pressed
source to share
try it
<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 has been initialized over and over again. I used the ng-init method, so it will initialize the object only once.
source to share