javascript - 在AngularJS中，如何将span中的文本 "bind"发送到文本框，并在单击span时更新它？

Question

我的问题最简单的版本是这样的:我有几个跨度:

<span id="one">SpanOne</span>
<span id="two">SpanTwo</span>
<span id="three">SpanThree</span>

和一个文本字段:

<input type="text" id="textField"/>

我想单击其中一个跨度，并用其文本填充文本字段。我可以做一些事情，比如将 'onClick="document.all.textField.value=this.text"' 添加到 span 元素，但如何使用 AngularJS 来做到这一点？

Answer 1

假设你的 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 拥有最好的整体解决方案:

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" />

您的 Controller :

yourApp.controller('yourController', function ($scope) {

    $scope.updateVar = function (event) {
        $scope.myVar = angular.element(event.target).text();
    };

});

通过这样做，如果您更改范围内的文本，则无需更改 ng-click 中的任何内容。

您应该要求 KayakDave 发布答案，我们非常欢迎他复制我对他的建议的演示，而不是接受它。