如何将选定的按钮值获取到输入文本框中以绑定值angularjs答案

【问题标题】：how to get selected button value into the input text box to bind values angularjs如何将选定的按钮值获取到输入文本框中以绑定值angularjs
【发布时间】：2016-02-04 09:19:02
【问题描述】：

如何将选定的按钮值放入文本框中？如果我更改输入框中的文本，必须将该文本绑定到按钮值.. 我有一个用 jquery 解决的代码，但是如何用 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>

用 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

【解决方案1】：

您需要将数据绑定技术与 ngModel 和 ngClick 结合使用。也许是这样的：

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

【讨论】：

嘿嗨，我有一个小疑问，输入在一个页面中，按钮在另一个页面中，我给出了到这 2 个页面的路由，它们之间没有发生数据绑定.. 是否有任何变化解决？？
这是重要的细节。因为您的两个页面基本上处于不同的范围内，所以解决方案需要使用某种通用范围或服务。你用 ngRouter/uiRouter？
你能给我一个建议，告诉我如何为上面的代码提供服务吗？
这里是一个带有ngRouter的简单版本。 uiRouter 应该是一样的。 plnkr.co/edit/aiVbeJfa24LI6WUHhpCe?p=preview
你给了我很多有价值的信息.. 但是我们不是在不使用 ng-repeat 的情况下绑定值吗？我只有静态按钮，，

【解决方案2】：

您只需在按钮上添加一个ng-click 函数，然后将$event 对象传递给它。这样您就可以访问触发事件的 DOM。

但我个人不会像尝试直接在控制器内部访问 DOM 那样使用这种方法。

标记

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

控制器

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 方法是您可以使用ng-repeat 数组呈现按钮，并将这些按钮放在您的范围内。并从点击对象传递按钮名称并将其分配给inputValue范围变量。

标记

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

代码

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

Angular way Plunkr

【讨论】：

@PankajParker 是的 :) 终于你做到了 .. 我知道你总是在摇摆 :) 非常感谢你 .. :)
@PankajParker 是的，当然.. :)
@PankajParker 嘿，Pankaj，我有一个小疑问，输入在一个页面中，按钮在另一个页面中，我给了这 2 个页面的路由，它们之间没有发生数据绑定.. 是有什么改变要解决吗？？

【解决方案3】：

您也可以查看PLUNKER DEMO LINK

使用ng-click、ng-model 和ng-change

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

和控制器：

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

【讨论】：

sry，你的代码不能正常工作，你能再检查一次吗？
点击任何按钮，然后在输入中设置按钮文本，然后如果更改输入文本，则更改单击的按钮文本。你可以访问演示链接吗？
嘿嗨，我有一个小疑问，输入在一个页面中，按钮在另一个页面中，我给出了到这 2 个页面的路由，它们之间没有发生数据绑定.. 是否有任何变化解决？？

【解决方案4】：

其实你不需要做任何事情，只需将相同的 $scope 变量绑定到文本框和按钮，

查看：

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

这里是工作 PlunkerApp

【讨论】：

我知道数据绑定..但我的要求不是..我想在输入文本框中显示选定的按钮值..
你的意思是动态取元素名并通过？
在您的代码中选择的按钮值显示在输入框中，但是我们在更改文本的地方，必须将按钮值更改为...但是在您的代码中，数据在它们之间没有绑定..
让我们continue this discussion in chat。