如何将选定的按钮值导入文本框?如果我在输入框中更改文本,必须将该文本绑定到按钮值..我有一个用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());
});
答案 0 :(得分:3)
您需要将数据绑定技术与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>
答案 1 :(得分:1)
只需在按钮上添加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;
};
});
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'}];
答案 2 :(得分:1)
您还可以查看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;
};
答案 3 :(得分:0)
实际上你不需要做任何事情,只需将相同的$ scope变量绑定到文本框和按钮,
查看:强>
<input ng-model="name" id="txtname" />
<button class="button button-full button-light" >{{name}}</button>
以下是工作 PlunkerApp