AngularJS在ng-click上更改范围变量
[英]AngularJS change scope variable on ng-click
问题描述
I try to set a scope variable within a template on ng-click and later read it in the controller. 
我尝试在ng-click在模板中设置范围变量， ng-click在控制器中读取它。 Example: 例：
HTML: 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: 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. 但是变量“edit.myVar”仍然是一个空数组。 What am I doing wrong? 我究竟做错了什么？ In my interpretation this is a valid ng-click expression. 在我的解释中，这是一个有效的ng-click表达式。
3 个解决方案
解决方案1
2 已采纳 2015-07-24 11:48:03
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.. 工作的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="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 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(){
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. 在加载文档应用程序之前我的另一个问题是引导。
解决方案2
1 2015-07-24 11:42:35
Initialize edit.myVar = {'entry' : ''}; 初始化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.
edit.showMyVar();edit.showMyVar();function
解决方案3
-1 2015-07-24 11:37:45
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. 我使用了ng-init方法，所以它只会初始化一次对象。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.