I'm doing a ng-blur and sending the current value of a input into a function. My problem is that I want to save the previous input value and pass that into the blur function, because if value is same no action.
<input type="text" class="input__text" name="name" ng-model="name" ng-blur="bluryLines(name)">
$scope.bluryLines = function(oldValue, value) {
if (value !== '' | value !== oldValue) {
console.log('some action');
} else {
console.log('is empty');
}
};
Use ng-change to call your function and use ng-model-options="{ updateOn: 'blur' }"
Docs: https://docs.angularjs.org/api/ng/directive/ngModelOptions
<input type="text" class="input__text" name="name" ng-model="name" ng-change="bluryLines()" ng-model-options="{ updateOn: 'blur' }">
Plunker: https://plnkr.co/edit/BLFj5iRtF3xUxIQEk8UT?p=preview
Keep a copy of the value in a variable at the end of the $scope.bluryLines function. You don't even need to pass any argument to the controller function.
var oldName;
$scope.bluryLines = function() {
if ($scope.name !== '' | $scope.name !== oldName) {
console.log('some action');
} else {
console.log('is empty');
}
// copy $scope.name
oldName = angular.copy($scope.name);
};
See this Plunker.
Related
<input
type="text"
datetime-picker
date-format="dd-MM-yyyy hh:mm a"
future-only
readonly
name="flg_{{user.user_id}}"
ng-model="orderItems[user.user_id].flg_time"
ng-click="saveOrder(user, orderItems[user.user_id])"
>
<input
type="text"
datetime-picker
date-format="dd-MM-yyyy hh:mm a"
future-only
name="dep_{{user.user_id}}"
ng-model="orderItems[user.user_id].dep_time"
ng-click="saveOrder(user, orderItems[user.user_id])"
>
var userInfo = auth.getCurrentUser().children;
angular.forEach(userInfo, function(item, key){
$scope.$watch('[orderItems[item.user_id].flg_time, orderItems[item.user_id].dep_time]', function(newVal, oldVal){
console.log("N", newVal); // undefined
console.log("O", oldVal); // undefined
if (newVal !== oldVal && typeof oldVal !== 'undefined') {
var orderItems = {
'order_id' : $scope.order.order_id,
'flg_time' : newVal[0],
'dep_time' : newVal[1],
}
$scope.saveOrder(item, orderItems);
}
}, true);
});
What i want to set value of new value into the original text box but it always says old and new value is undefined it should return the input value please guide what's wrong in it.
Thanks in advance
instead of $scope.$watch use $scope.$watchcollection,because $watch only uses for 1 element if you go array elements than watchollection is better
Hope it helpsfull.
Using the directive in How to limit input[number] cause a issue.
When in input reached max I want to mark the input(double right click on the input) and then pressing a digit to make it change the entire input don't change it, due to the directive e.preventDefault();
The selection event can be view in:
angular.element(elem).on("select", function(e) {
console.log(e);
});
What is the best way to fix it?
The directive:
angular.module('myApp')
.directive('limitTo', limitTo);
function limitTo() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
angular.element(elem).on("keypress", function(e) {
if (this.value.length == limit){
e.preventDefault();
}
});
}
}
};
And use:
<input type="number" class="form-control form-control-lg" limit-to="6"
ng-model="vm.details.m_inputSMS" placeholder = {{vm.configProprs.kodPlaceHolder}} name ="m_inputSMS" id="m_inputSMS"
ng-model-options="{ updateOn: 'blur' }"required/>
So to solve this issue I used window.getSelection().toString() and make sure the selection match the input:
if(this.value.length == limit && window.getSelection().toString() == this.value){
//logic goes in here...
}
If you want to give limit to input field then using ng-minlength="6" ng-maxlength="6" this you can assign limit in angularjs.
<input type="number" class="form-control form-control-lg" ng-minlength="6" ng-maxlength="6"
ng-model="vm.details.m_inputSMS" placeholder = {{vm.configProprs.kodPlaceHolder}}
name ="m_inputSMS" id="m_inputSMS" ng-model-options="{ updateOn: 'blur' }"required/>
I'm trying to get the current/next item in my controller. What I want to do to get the next element and be able to set focus on it. I can do this with javascript, but not sure how to do get the event within angular, so I can access the e.relatedTarget. I'm also open for improvements and suggestions
Plunker
<input type="text" class="input__text" name="name" ng-model="name" ng-change="bluryLines(name)" ng-model-options="{ updateOn: 'blur'}" ng-disabled="blured">
function focusNextInput (e) {
console.log('focusNextInput');
var target = e.target;
var relatedTarget = e.relatedTarget;
if (relatedTarget !== null) {
console.log('has a related target');
relatedTarget.focus();
}
}
$scope.bluryLines = function(value) {
$scope.blured = true;
if (value === '') {
console.log('value is empty');
} else {
console.log(value);
}
$timeout(function() {
$scope.blured = false;
//how do I get the event here to be passed into the function
focusNextInput();
}, 1000);
};
Have you tried with $event in angular.
<input type="text" class="input__text" name="name" ng-model="name" ng-click='functionname($event)'>
Regards,
Selvam.M
I am facing an issue with using ng-init and assign it model inside my html.
The following code works fine. The following code is for Add/Edit functionality. For example, when row is is opened in Edit mode than it persist existing value and shows it in textbox.
<div>
<div ng-if="title == 'Add Student'">
<input type="text" name="name"placeholder="Student Name" data-ng-model="registration.Student.FirstName" maxlength="50">
</div>
<div ng-if="title == 'Edit Student'">
<input type="text" name="name"placeholder="Student Name" data-ng-model="student.Student.FirstName" maxlength="50">
</div>
</div>
However, the following code which is short version of above code does not work. I mean when the row is opened in edit mode it shows text field but does not show existing value (first name) in it. Why?
<div ng-init="model = (title == 'Add Student' ? registration.Student : student.Student)">
<input type="text" name="name" placeholder="Student Name" data-ng-model="model.FirstName" maxlength="50">
</div>
Please suggest whether ng-init can't be used in this way or some issue in my code?
thanks
Controller
var currentState = $state.current.name;
if if (currentState == "Add")
{
$scope.registration = {
Student: {
FirstName: '',
}
var _init = function () {
}
$scope.title = " Add Student";
}
else
{
$scope.student= {};
$scope.student= response[0];
var _init = function () {
$scope.title = " Edit Student";
}
}
You are ng-init block is wrong currently it is returning true or false, you are messing with brackets.
Markup
<div ng-init="model = (title == 'Add Student') ? registration.Student : student.Student">
<input type="text" name="name" placeholder="Student Name" data-ng-model="model.FirstName" maxlength="50">
</div>
Update
In your current case you ng-init is getting executed while element rendered on the DOM, at that instance on time registration.Student & student.Student doesn't have any value. Evaluation of ng-init setting null object to the model student. I'd suggest you do set model value from the controller logic that would be more safer.
Code
var currentState = $state.current.name;
if (currentState == "Add")
{
$scope.registration = {
Student: {
FirstName: '',
}
var _init = function () {
}
$scope.title = " Add Student";
}
else
{
$scope.student= {};
$scope.student= response[0];
var _init = function () {
$scope.title = " Edit Student";
}
//shifted logic in controller
$scope.model = (title == 'Add Student' ? registration.Student : student.Student);
}
Markup
<div>
<input type="text" name="name" placeholder="Student Name"
data-ng-model="model.FirstName" maxlength="50"/>
</div>
Other way you could add one more flag like loadedData which will says that ajax response has been fetched & registration.Student & student.Student values are available in the scope.
Markup
<div ng-if="loadedData">
<input type="text" name="name" placeholder="Student Name" data-ng-model="model.FirstName" maxlength="50">
</div>
Code
var currentState = $state.current.name;
if (currentState == "Add")
{
$scope.registration = {
Student: {
FirstName: '',
}
var _init = function () {
}
$scope.title = " Add Student";
}
else
{
$scope.student= {};
$scope.student= response[0];
var _init = function () {
$scope.title = " Edit Student";
}
//set flag
$scope.loadedData = true;
}
I'd like to reset the value of an input field (text='') whenever model.id is null.
How to bind the input value to respond to a certain value of an observable object? Something that would look like:
<input type="text" data-bind="text: if (model.value == null) { '' }" />
You can use ? operator in data-bind attribute:
<input type="text" data-bind="value: model.id() == null ? 'Default Value' : model.value()" />
In your viewmodel, initiate value of the property as follow :
var model.value = ko.observable('');
In HTML, you don't have to use confitional expression
data-bind="text: model.value"
check these codes
<input type="text" data-bind="value: id() == true? 'Value is Red' : value()" />
function viewModel() {
this.id = ko.observable(true);
this.value = ko.observable("Value is Green");
}
ko.applyBindings(new viewModel());
http://jsfiddle.net/d4SKr/
The correct answer should be to create a computed observable to get the label.
self.getLabel = ko.pureComputed(function() {
return this.value() === null ? 'Value is red' : value();
});
<input type="text" data-bind="text: getLabel" />