how to get selected button value into the input text box to bind values angularjs

Question

How to get selected button values into text box ? if i change text in input box, have to bind that text to the button value .. i have a code solved with jquery, but how to solve this with angularjs?? JSBin Link to Edit

AngularJS

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
//Code goes here//
});

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
  </head>

  <body ng-controller="MainCtrl">

<div>
  <button>Feed</button>
  <button>the</button>
  <button>Input</button>
</div>
<input type="text" value="click a button">
 
  </body>

</html>

Solved with jQuery

var actualButton;
$( "button" ).click(function() {
  actualButton = $(this);
  var text = $( this ).text();
  $( "input" ).val( text );
});
$("input").on('keyup', function(e){
  if(actualButton === undefined)
    return;

  actualButton.text($(this).val());
});

dfsq · Accepted Answer · 2016-02-04 09:36:01Z

3

You will need a combination of data-binding technics with ngModel and ngClick. Maybe something like this:

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script>angular.module('demo', []);</script>

<div ng-app="demo">
    <div>
        <button ng-click="i = 1" ng-init="button1 = 'Feed'">{{ button1 }}</button>
        <button ng-click="i = 2" ng-init="button2 = 'the'">{{ button2 }}</button>
        <button ng-click="i = 3" ng-init="button3 = 'Input'">{{ button3 }}</button>
    </div>
    <input type="text" ng-model="this['button' + i]" placeholder="click a button">    
</div>

answered Feb 4, 2016 at 9:36

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vijju Sena Over a year ago

hey hi i have a small doubt, input is in a page and buttons are in another page, i given route to those 2pages,, where data binding is not happening between them.. is there any changes to solve??

dfsq Over a year ago

This is important detail. Because your two pages are in different scopes basically the solution needs to use some sort of common scope or service. You use ngRouter/uiRouter?

Vijju Sena Over a year ago

can u give me a suggestion that how to give a service to the above code .. ?

dfsq Over a year ago

Here is a simple version with ngRouter. Should be the same for uiRouter. plnkr.co/edit/aiVbeJfa24LI6WUHhpCe?p=preview

Vijju Sena Over a year ago

u given me great valueable information.. but con't we bind values without using ng-repeat?? i have only static buttons,,

|

Pankaj Parkar · Accepted Answer · 2016-02-04 10:00:39Z

2

Simply you could add a ng-click function over button, pass $event object with it. So that you could access the DOM on which event gets fired.

But I Personally don't use this method like I trying to access DOM directly inside a controller.

Markup

<div>
  <button ng-click="buttonClick($event)">Feed</button>
  <button ng-click="buttonClick($event)">the</button>
  <button ng-click="buttonClick($event)">Input</button>
</div>
<input type="text" ng-model="inputValue" value="click a button">

Controller

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
    $scope.inputValue = 'click a button';
    $scope.buttonClick = function(event){
        console.log(event);
        $scope.inputValue = event.target.innerText;
    };
});

Plunkr Here

Angular approach would be you could render the button using ng-repeat array, and have those button inside you scope itself. And pass the button name from the click object and assign it to inputValue scope variable.

Markup

<div>
  <button ng-click="$parent.selected = $index" ng-repeat="button in buttons">{{button.text}}</button>
</div>
<input type="text" ng-model="buttons[selected || 0].text" value="click a button">

Code

$scope.buttons = [{text: 'Feed', id: '1'}, {text: 'the', id: '2'}, {text: 'Input', id: '3'}];

Angular way Plunkr

edited Feb 4, 2016 at 10:00

answered Feb 4, 2016 at 9:34

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

3 Comments

Vijju Sena Over a year ago

@PankajParker yeah :) finally u did it .. i know u r always rocking :) thank u very much .. :)

Vijju Sena Over a year ago

@PankajParker yeah Sure .. :)

Vijju Sena Over a year ago

@PankajParker hey hi Pankaj i have a small doubt, input is in a page and buttons are in another page, i given route to those 2pages,, where data binding is not happening between them.. is there any changes to solve??

Shaishab Roy · Accepted Answer · 2016-02-04 10:07:34Z

1

You can also check PLUNKER DEMO LINK

used ng-click, ng-model and ng-change

in Html:

<body ng-controller="MainCtrl">
    <h1>Hello Plunker!</h1>
  <div>
  <button type="button" ng-click="setText($event)">Feed</button>
  <button type="button" ng-click="setText($event)">the</button>
  <button type="button" ng-click="setText($event)">Input</button>
 </div>
 <input type="text" ng-model="textVal" ng-change="changeButtonText()">
</body>

and controller:

  $scope.textVal = 'click a button';
  $scope.seletetedEvent = {};
  $scope.setText = function(element) {
    console.log(element);
    $scope.seletetedEvent = element;
     $scope.textVal = element.currentTarget.innerHTML;
  };
  $scope.changeButtonText = function(){
    $scope.seletetedEvent.currentTarget.innerHTML = $scope.textVal;
  };

edited Feb 4, 2016 at 10:07

answered Feb 4, 2016 at 9:43

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

3 Comments

Vijju Sena Over a year ago

sry,, not working ur code properly,, can u pls check it once again ?

Shaishab Roy Over a year ago

click on any button then set button text in input and then if change input text then change clicked button text. can you visit demo link pls?

Vijju Sena Over a year ago

hey hi i have a small doubt, input is in a page and buttons are in another page, i given route to those 2pages,, where data binding is not happening between them.. is there any changes to solve??

Sajeetharan · Accepted Answer · 2016-02-04 09:23:31Z

0

Actually you don't need to do anything, just bind the same $scope variable to both textbox and button,

View:

 <input  ng-model="name" id="txtname" />
 <button class="button button-full button-light" >{{name}}</button>

Here is the Working PlunkerApp

answered Feb 4, 2016 at 9:23

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

4 Comments

Vijju Sena Over a year ago

i know that data binding.. but my requirement is not that.. i want to show selected button value into a input text box..

Sajeetharan Over a year ago

you mean to take the element name dynamically and pass?

Vijju Sena Over a year ago

in ur code selected button value showing in inputbox, but where we change the text, have to change button value to ... but in ur code data is not binding between them..

Vijju Sena Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

how to get selected button value into the input text box to bind values angularjs

4 Answers 4

6 Comments

3 Comments

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related