This is a textarea element
<textarea id="textfield" paceholder="type anything here"></textarea>
This is a button
<button type="button" class="btn btn-danger" id="button">Alert</button>
I can trigger the button above to alert the value of a textarea using jquery
<script>
$(function() {
$('#button').click(function() {
var value = $('#textfield').val();
alert(value);
});
});
</script>
Is there a way I can use angular to trigger the button alert by default whenever a text or value enters into the textarea
I am trying to use something like this
$scope.$watch('textfield', function () {
//pop alert if textarea has a value
but somehow lost along the line.
You can use the built in ngKeyup directive of Angular
<div ng-app="myapp" ng-controller="myctrl">
<textarea ng-keyup="show($event)" name="" id="" cols="30" rows="10"></textarea>
</div>
Your js
angular.module("myapp",[])
.controller("myctrl", function($scope){
$scope.show = function($event){
alert($event.target.value);
}
})
If you need to force a button click everytime text is entered alter your show function as follows
angular.module("myapp",[])
.controller("myctrl", function($scope){
$scope.show = function($event){
alert($event.target.value);
document.querySelector(".btn").click();
}
})
note: ngKeyup fires every time that key is released, if you need to listen for each character entered in the textaread use the ngChange event
<div ng-app="myapp" ng-controller="myctrl">
<textarea ng-change="show($event)" name="" id="" cols="30" rows="10"></textarea>
</div>
ng-change will help:
<input type="textbox" ng-model="text" ng-change="change()" />
In controller:
$scope.change = function() {
alert($scope.text);
};
Related
Hello I need help for angularjs.
I want to trigger ng-change on input type number input field.
<input
ng-required="true"
ng-change = "onChangePrePay()"
type="number"
ng-model="entry.team.prepaidEntriesNum"
/>
but on-change is triggered only when input field loses focus. Any idea how to override this behavior. It's totally unexpected.
var app = angular.module('myApp',[]);
app.controller('ctrlMain',function($scope){
$scope.test = 23;
$scope.onChangePrePay = function(){
alert('CHANGE');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="ctrlMain">
<input
ng-required="true"
ng-OnChange = "onChangePrePay()" */change here in your code ng-OnChange instead of ng-change
type="number"
ng-model="test"
/>
</div>
</body>
to check trigger change on the input use ng-change not ng-onchange
replace "ng-onchange" with "ng-change"
I start in angular JS and I want to disable (attribute "ng-disabled") a button while my input text "login" and "password" are empty. The problem is that, by default the text of input-text "login" is "LOGIN" and the text of input-text "password" is "PASSWORD", so my inputs are never empty...
Help,
Thanks
Simply use a placeholder instead of populating it with something
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.pass = ""; // empty, instead of "PASSWORD"
$scope.foo = () => {
console.log($scope.pass);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input placeholder="PASSWORD" ng-model="pass">
<button ng-click="foo()" ng-disabled="!pass">Sign in</button>
</div>
Here is another example that suits your description, where you can populate it with some text, but still have the button disabled. It uses ng-focus to reset the input field if it is selected, and it has $dirty checking, to only allow to press the button when the input has been altered/changed.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.pass = "PASSWORD";
$scope.foo = () => {
console.log($scope.pass);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="form">
<input ng-focus="pass=''" name="pass" ng-model="pass">
<button ng-click="foo()" ng-disabled="!form.pass.$dirty || !pass">Sign in</button>
</form>
</div>
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());
});
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>
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
i have a html input field and would like to stay focussed on it no matter what happens. I know how to achieve it with JQuery but i only want to embed it if i really need to. My code example doesn't work.
My thoughts for code so far:
HTML
<input type="text" ng-blur="refocus()" autofocus>
AngularJS (inside my controller)
$scope.refocus = function($scope, $element) {
$element.focus();
};
I hope you guys have the right inspiration or better solution to solve this :)
You can keep an element focused with the following directive:
angular.module('test', []).directive('stayFocused', function(){
return {
link: function($scope, $element){
$element.on('blur', function(){
$element[0].focus();
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
First
<input type="text" stay-focused="" autofocus>
<br />
Second
<input type="text" stay-focused="" autofocus>
</div>
I'm running into an interesting problem while trying to restrict user input to a number.
My HTML looks like so:
<input name="activeDate" type="number" class="form-control" ng-model="account.tag.activeDate"></input>
...and my relevant Angular controller code like so(this is inside a click handler):
tag.activeDate = moment.utc().add(tag.activeDate, tag.tagDurationType).toISOString();
Unfortunately when I click the button which submits my form and calls that click handler I get this error in my console:
[ngModel:numfmt] Expected `2015-08-27T22:09:18.919Z` to be a number
Looks like my input is checked upon submitting, when it's converted to a date within my controller. How do I limit user input to numbers without running into this?
Use ng-pattern="/^(\d)+$/" - it's simple regex expression
var app = angular.module('num', []);
app.controller('numCtrl', function($scope, $http){
$scope.digits = {};
});
angular.bootstrap(document.body, ['num']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="numCtrl">
<form class="digits" name="digits" ng-submit="getGrades()" novalidate >
<input type="text" placeholder="digits here plz" name="nums" ng-model="nums" required ng-pattern="/^(\d)+$/" />
<p class="alert" ng-show="digits.nums.$error.pattern">Numbers only, please.</p>
<br>
<input class="btn" type="submit" value="Do it!" ng-disabled="!digits.$valid" />
</form>
</body>
Select your input element, then do the following you have to look up value of number0Key and number9Key:
myElement.on("keypress", function(e) {
if (e.which < number0Key || e.which > number9Key) {
e.stopPropagation();
}
});