Question

我最简单的问题是：我有几个跨度：

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

和文字字段：

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

我想点击其中一个跨度，并在文本字段中填入文本。我可以做一些事情，比如在span元素中添加'onClick =“document.all.textField.value = this.text”'，但我怎样才能使用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" />

你的控制器：

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

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

});

通过这种方式，如果您更改跨度内的文本，则不必更改ng-click中的任何内容。

你应该让KayakDave发布一个答案，我非常欢迎他复制我对他的建议的证明，而不是接受。

Answer 2

我更喜欢把逻辑放在控制器里面

在你的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" />

在您的控制器中：

/*...*/
$scope.updateVar = function(value) {
    $scope.myVar = value;
}

Answer 3

其他例子太复杂了，如果它们起作用的话。您只需创建一个变量，并在跨度中显示它。

示例：http://jsfiddle.net/XPLpP/1/

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";
});

Answer 4

这是一个简单的解决方案：

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

小提琴：

http://jsfiddle.net/jeremylikness/G74wB/

如果你想绑定到范围内的东西，它将是：

<span ng-click="text = variable">{{variable}}</span>

在AngularJS中，如何将跨区中的文本“绑定”到文本框中，并在单击跨度时更新它？

4 个答案: