admin管理员组

文章数量:1022989

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=".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>

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/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());
});

  • javascript
  • angularjs
Share Improve this question asked Feb 4, 2016 at 9:19 Vijju SenaVijju Sena 1832 silver badges13 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3

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

<script src="https://code.angularjs/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>

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

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

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

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=".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>

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/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());
});

  • javascript
  • angularjs
Share Improve this question asked Feb 4, 2016 at 9:19 Vijju SenaVijju Sena 1832 silver badges13 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3

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

<script src="https://code.angularjs/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>

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

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

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

本文标签： javascripthow to get selected button value into the input text box to bind values angularjsStack Overflow

版权声明：本文标题：javascript - how to get selected button value into the input text box to bind values angularjs - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745494324a2153101.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。