javascript 在 AngularJS 中，如何将跨度中的文本“绑定”到文本框，并在单击跨度时更新它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21314485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In AngularJS, how can I "bind" the text in a span to a text box, and update it when I click on the span?
提问by Jer
The simplest version of my question is this: I have a few spans:
我的问题的最简单版本是：我有几个跨度：
<span id="one">SpanOne</span>
<span id="two">SpanTwo</span>
<span id="three">SpanThree</span>
and a text field:
和一个文本字段：
<input type="text" id="textField"/>
I want to click on one of the spans, and have the text field populated with its text. I can do something like adding 'onClick="document.all.textField.value=this.text"' to the span elements, but how can I do it using AngularJS?
我想单击其中一个跨度，并在文本字段中填充其文本。我可以做一些事情，比如将 'onClick="document.all.textField.value=this.text"' 添加到 span 元素，但是我如何使用 AngularJS 来做到这一点？
回答by jnthnjns
Assuming your AngularJS enviornment is setup properly, the simplest way:
假设您的 AngularJS 环境设置正确，最简单的方法是：
<span id="one" ng-click="myVar = 'SpanOne'">SpanOne</span>
<span id="two" ng-click="myVar = 'SpanTwo'">SpanTwo</span>
<span id="three" ng-click="myVar = 'SpanThree'">SpanThree</span>
<input type="text" id="textField" ng-model="myVar" />
@KayakDave has the best overall solution, in my opinion:
在我看来，@KayakDave 拥有最好的整体解决方案：
HTML:
HTML：
<span id="one" ng-click="updateVar($event)">SpanOne</span>
<span id="two" ng-click="updateVar($event)">SpanTwo</span>
<span id="three" ng-click="updateVar($event)">SpanThree</span>
<input type="text" id="textField" ng-model="myVar" />
Your controller:
您的控制器：
yourApp.controller('yourController', function ($scope) {
$scope.updateVar = function (event) {
$scope.myVar = angular.element(event.target).text();
};
});
By doing it this way, if you change the text within the span than you wouldn't have to change anything in the ng-click.
通过这样做，如果您更改跨度内的文本，则不必更改ng-click.
You should ask KayakDave to post an answer, which he is is more than welcome to copy my demonstration of his suggestion, and than accept that.
您应该要求 KayakDave 发布答案，非常欢迎他复制我对他的建议的演示，而不是接受。
回答by Beterraba
I prefer put the logic inside the controller
我更喜欢把逻辑放在控制器里面
In your html:
在你的 html 中：
<span id="one" ng-click="updateVar('SpanOne')">SpanOne</span>
<span id="two" ng-click="updateVar('SpanTwo')">SpanTwo</span>
<span id="three" ng-click="updateVar('SpanThree')">SpanThree</span>
<input type="text" id="textField" ng-model="myVar" />
In your controller:
在您的控制器中：
/*...*/
$scope.updateVar = function(value) {
$scope.myVar = value;
}
回答by Jason
The other examples are too complicated, if they even work. You just create a variable, and display it in the span.
其他例子太复杂了，如果它们甚至有效的话。您只需创建一个变量，并将其显示在跨度中。
Example: http://jsfiddle.net/XPLpP/1/
示例：http: //jsfiddle.net/XPLpP/1/
HTML:
HTML：
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="text" />
<span> {{text }} </span>
</div>
CODE:
代码：
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.text = "initial value";
});
回答by Jeremy Likness
Here is a simple solution:
这是一个简单的解决方案：
<div data-ng-app>
<input type="text" id="textField" ng-model="text"/>
<span ng-click="text = 'SpanOne'">SpanOne</span>
<span ng-click="text = 'SpanTwo'">SpanTwo</span>
<span ng-click="text = 'SpanThree'">SpanThree</span>
</div>
And the fiddle:
和小提琴：
http://jsfiddle.net/jeremylikness/G74wB/
http://jsfiddle.net/jeremylikness/G74wB/
If you want to bind to something on scope it would look like:
如果你想绑定到作用域上的东西，它看起来像：
<span ng-click="text = variable">{{variable}}</span>
