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?

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?

• javascript
• html
• angularjs

Share Improve this question Follow asked Jan 23, 2014 at 16:53 JerJer 5,64899 gold badges3636 silver badges4444 bronze badges 2

• I'm not sure if I'm going about it the right way, so I thought I'd ask a "clean slate" question. But I have tried putting the same ng-model on the spans and the text field, and also adding an ng-click attribute to the spans, and neither worked. – Jer Commented Jan 23, 2014 at 16:57
• 1 @ToddMotto This is a basic example of Angular and he's just starting. You sound like you don't even know Angular. – Michael J. Calkins Commented Jan 23, 2014 at 17:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Assuming your AngularJS enviornment is setup properly, the simplest way:

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

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.

You should ask KayakDave to post an answer, which he is is more than wele to copy my demonstration of his suggestion, and than accept that.

I prefer put the logic inside the controller

In your 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;
}

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/jeremylikness/G74wB/

If you want to bind to something on scope it would look like:

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

The other examples are too plicated, if they even work. You just create a variable, and display it in the span.

Example: http://jsfiddle/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";
});