Question

121

In AngularJS, how can I bind the text in a span to a text box, and update it when I click on the span?

rated 0 times [ 126] [ 5] / answers: 1 / hits: 21166 / 11 Years ago, thu, january 23, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jenna

Add To Favorites

Follow

Total Points: 706

Total Questions: 107

Total Answers: 106

Location: Azerbaijan

Member since Tue, Sep 21, 2021

3 Years ago

answered 11 Years ago tierney · Accepted Answer

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 welcome to copy my demonstration of his suggestion, and than accept that.