如何将选定的按钮值获取到输入文本框中以绑定值angularjs
[英]how to get selected button value into the input text box to bind values angularjs
问题描述
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?? 如果我在输入框中更改文本，则必须将该文本绑定到按钮值..我有一个用jquery解决的代码，但是如何用angularjs解决呢？ JSBin Link to Edit JSBin编辑链接
AngularJS 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 用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()); });
4 个解决方案
解决方案1
3 已采纳 2016-02-04 09:36:01
You will need a combination of data-binding technics with ngModel and ngClick. 您需要结合使用ngModel和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>
解决方案2
2 2016-02-04 09:34:29
Simply you could add a ng-click function over button, pass $event object with it. 只需在按钮上添加ng-click函数，然后将$event对象传递给它即可。 So that you could access the DOM on which event gets fired. 这样您就可以访问触发事件的DOM。
But I Personally don't use this method like I trying to access DOM directly inside a controller. 但是我个人不会像尝试在控制器内部直接访问DOM那样使用此方法。
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;
};
});
Angular approach would be you could render the button using ng-repeat array, and have those button inside you scope itself. 角度方法是您可以使用ng-repeat数组渲染按钮，并将那些按钮置于作用域自身内部。 And pass the button name from the click object and assign it to inputValue scope variable. 并从click对象传递按钮名称，并将其分配给inputValue作用域变量。
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'}];
解决方案3
1 2016-02-04 09:43:36
You can also check PLUNKER DEMO LINK 您也可以检查PLUNKER DEMO LINK
used ng-click , ng-model and ng-change 二手ng-click ， ng-model和ng-change
in Html: 在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;
};
解决方案4
0 2016-02-04 09:23:31
Actually you don't need to do anything, just bind the same $scope variable to both textbox and button, 实际上，您不需要执行任何操作，只需将相同的$ scope变量绑定到文本框和按钮，
View: 视图：
<input ng-model="name" id="txtname" />
<button class="button button-full button-light" >{{name}}</button>
Here is the Working PlunkerApp 这是工作中的PlunkerApp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.