Menu
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
768
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 :
{{ }} since this code renders frequently . so you will not get the actual value.
94
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
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
