I will have N number of input fields and every field will have a value CHANGE without getting in or out of focus. How can I detect value change of every input field.
I only found one question related and using that I tried following but it is not working. can Any one help further
for (var i=0;i<$scope.customers.product.length;i++)
{
//i m trying to get unique ids and bining input fields for change
$('#total-i').on('input', function() {
alert($(this).val()); // get the current value of the input field.
});
}
//there will be multiple of input fields having unique ids
<input id="total-{{$index}}" value={{cust.price*cust.quantity}}"/>
It should be easy and possible with ng-change provided you have ng-model associated to input.
<input id="total-{{$index}}" value={{cust.price*cust.quantity}}" ng-model="total" ng-change="updatemethod()"/>
total and updatemethod() should be part of controller $scope.
I'd create an object to associate with the ng-model and then watch it. Since you didn't provide a Codepen of fiddle instance to meddle with, I'm not sure this works, check it out.
//for each index
$.each(modelObject, function(key, value) {
//set a watcher
var watchString = "modelObject[" +key + "]";
$scope.$watch(watchString, function (newValue, oldValue) {
$scope.update(modelObject[key]);
});
});
The question you linked in your question is not about Angular (it uses jQuery). Where is the Angular way to do it (considering you are showing inputs with ng-repeat):
<div ng-repeat="i in items">
<input ng-model="i" ng-change="update(i)"/>
</div>
With this code, whenever you will update i (eg: when you will change the input value), the update(i) method will be triggered.
Here is a tiny example of what I'm explaining:
function MyCtrl($scope) {
$scope.items = ['1', '2', '3', '4', '5'];
$scope.update = function(item) {
alert(item + ' has been changed!');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<div ng-repeat="i in items">
<input type="text" ng-model="i" ng-change="update(i)" />
</div>
</div>
Related
I am showing FreeEvents using checkbox. I am passing the value to the filter as filter:filterFreeEvent . This is working fine.
But I want to avoid passing value in the filter rather I want to use a change event of a checkbox to filter.
Something like
<input type="checkbox" ng-model="showFreeEvent" ng-change($event)">
This is my JsFiddle example.
Has anyone done something like this?. Any help or suggestion would be appreciated.
Thanks in advance
You can also change a variable in the change-event only like this :
<input ng-model="changeValue" ng-change="showFreeEvent = showFreeEvent== false ? true : false" value="" type="checkbox" />
If the showFreeEvent is false, ng-change will change it to true and vice-versa.
You can use ng-change to handle the checkbox change event. Then you can use Array.prototype.filter to filter your events. Filtered events should be stored in a separate variable. Here is an example of how to do this:
<input ng-model="showFreeEvents" type="checkbox" ng-change="onShowFreeEventsChanged()" />
<div ng-controller="myCtrl">
<div ng-repeat="event in filteredEvents">
<span>{{event.eventName}}</span></br>
<span>{{event.eventStartDateTime}}</span></br>
<span>{{event.itemCreatedDateTime}}</span></br>
</br></br>
</div>
</div>
Then in your controller:
$scope.showFreeEvents = false;
$scope.events = [ /* here you should store unfiltered events */ ];
$scope.filteredEvents = filterEvents($scope.events);
// whenever showFreeEvents checkbox value changes, re-filter the events
$scope.onShowFreeEventsChanged = function() {
$scope.filteredEvents = filterEvents($scope.events);
};
function filterEvents(events) {
return events.filter(function(event) {
// Here you should write your filtering logic.
// I'd recommend to remove such comparisons, as these are prone to errors.
// \
return !$scope.showFreeEvents || event.eventName === 'Event 9';
});
}
I made the following code (jsFiddle) to get the input of a text field:
var app = angular.module('myApp', [
'my.controllers'
]);
var controllers = angular.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
});
controllers.controller('listdata', function($scope, $http) {
$scope.editItem = function(event) {
var fieldTitle = $(event.currentTarget).attr("data-id");
var fieldValue = event.target.value;
console.log(fieldTitle + " : " + fieldValue);
};
})
In this case the function only returns the field name and field value of which the text is changed. What is the correct way to get all values of all input fields, when one of the fields is changed?
Regarding to your question
"What is the correct way to get all values of all input fields, when one of the fields is changed?",
this fiddle shows you one of the correct ways to get all the results on field change.
The basic idea is to use ng-model directive for input fields: in fact, your code
var fieldTitle = $(event.currentTarget).attr("data-id");
var fieldValue = event.target.value;
It's a sign you are not thinking in a angular way (and i suggest you to read this excellent answer to get an idea of what you should do).
The solution
Use ng-model to bind your variables to your scope, and ng-change to intercept changes in them:
<input type="text" ng-model="id" ng-change="editItem(id)">
<input type="text" ng-model="title" ng-change="editItem(title)">
<input type="text" ng-model="number" ng-change="editItem(number)">
and in your controller:
$scope.editItem = function (value) {
console.log("currentValue" + value);
console.log("ID:" + $scope.id + " Title: " + $scope.title +" Number:" + $scope.number);
};
First of all you have'nt used ng-model directive in your input box hence it will definetly give error if you use ng-change and ng-blur on that particular input.
<input type="text" data-id="id" ng-model="itemList.input1" ng-change="editItem()">
<input type="text" data-id="title" ng-model="itemList.input2" ng-blur="editItem()">
<input type="text" data-id="number" ng-model="itemList.input3" ng-blur="editItem()">
Here is an
jsfiddle where i have console.log a object which returns you all three values when blur or change from a input.
I have an ng-repeat which creates a form with some starting data. Then the user is free to modify said data and the changes should appear in the form. Before that, the user submitted data are sanitized by another function, which is called by an ng-click on a button.
Everything works well under the hood (I checked my $scope.some_array, from which ng-repeat takes the data and the new data is in the right place) but nothing happens on the page.
The element:
<li ng-repeat="field in some_array" id="field-{{$index}}">
<div class="{{field.field_color}}">
<button type="button" ng-click="save_field($index)">done</button>
{{field.nice_name}}
</div>
<div id="field-input-{{$index}}">
<input type="text" id="{{field.tag}}" value="{{field.content}}">
<label for="{{field.tag}}">{{field.nice_name}}</label>
</div>
</li>
save_field code:
$scope.save_field = function (index) {
console.log($scope.some_array[index]["content"])
var value = $("#field-" + index).children("div").children("input").val()
var name = $scope.some_array[index]["name"]
var clean_value = my_clean(value)
if (norm_value === "") {
return
}
$scope.some_array[index]["content"] = clean_value
console.log($scope.some_array[index]["content"])
}
On the console I see:
10.03.16
10/03/16
Which is right, but in the form I only see 10.03.16. I already tried putting $timeout(function(){$scope.$apply()}) as the last line of my function, but the output is still the same.
You shouldn't use input like this if you want to bind a variable to it. Digest loop will refresh the value but it will not be updated visibly because this is not html native behavior.
Use ng-model instead, it will update view value of the input as expected:
<input type="text" id="{{field.tag}}" ng-model="field.content">
Also using ng-model your variable will be updated when user modify the input, so you can retrieve it to do some treatments much more easily in save_field function, without jQuery:
$scope.save_field = function (index) {
if (norm_value === "") {
return;
}
$scope.some_array[index]["content"] = my_clean($scope.some_array[index]["content"]);
};
More infos: https://docs.angularjs.org/api/ng/directive/ngModel
How can I get the value of name2?
function DemoController($scope) {
$scope.name1 = 'LISA';
//How can I get the value of name2?
console.log($scope.name2) //this does not work
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="DemoController">
{{ name1 }}
<input type="text" placeholder="Lisa" ng-model="name2">
</div>
This happens because your not initialize the name2 inside the controller. so there is no property called name2 in the scope at the moment of console.log . and name2 property will create on the scope right after your first change on the input. so thats why its getting undefined.
here is the Demo Plunker, check the console.
$scope.$watch('name2', function(newVal, oldVal) {
console.log("new value : " + newVal);
console.log("old value : " + oldVal);
});
i have added a $watch on name2 property (and this $watch function will execute when changing the value of name2), note that its undefined first and it will take the value of input right after you type something in the textbox.
try this
<div ng-app="" ng-controller="DemoController">
{{ name2 }}
<input type="text" placeholder="Lisa" ng-model="name2">
</div>
First, your controller is running before $scope.name2 even existed yet. You should have the console report the changes at some point AFTER. Remove that line from your code. (console.log...)
Whenever the text in name2 changes, $scope.name2 will be set to that value. You can see the effect if you ADD the following to the controller:
$scope.saveChanges = function () {
alert($scope.name2);
}
And to the HTML:
<button ng-click="saveChanges()">See Value</button>
try to follow me on this one.
On the first execution of the script, the variable (or property - doesn't really matter for this topic) is not declared.
Once the interpreter reaches the console.log function, it tries to call name2's value, But as we said - it is not defined.
In order to log the data you're binding, you should implement some logic that executes console.log only after a change or maybe even using $scope.apply. (I believe that $scope.apply is too far for you right now and you should ignore it).
Bottom line is - Your variable is not defined for the first iteration, therefore you're getting this result.
You must submit form to get Values or you use Watch Function
function DemoController($scope) {
$scope.name1 = 'LISA';
$scope.submitName = function () {
console.log($scope.name2)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="DemoController">
{{ name1 }}
<input type="text" placeholder="Lisa" ng-model="name2">
<button ng-click="submitName()">click </button>
</div>
name 2 will change as you type in the input box. You can see this by adding
{{name2}}
to your html
the controller will not see the change in name2 unless you watch for it, you can do this using $watch, add this to your controller
$scope.$watch('name2', function() {
console.log($scope.name2);
});
Put your ng model in watch for getting the updates
function DemoController($scope) {
$scope.name1 = 'LISA';
//this will work
$scope.$watch(function(val){
if(val){
console.log($scope.name2);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="DemoController">
{{ name1 }}
<input type="text" placeholder="Lisa" ng-model="name2">
</div>
I'm still fairly new to angular.js. This seems like it should be very simple, but I'm stumped.
I have an input field:
<input type="text" placeholder="Search" ng-model="search.txt">
And I have a button that calls this function in my controller on ng-click:
$scope.clearSearch = function() {
$scope.search = {txt:"qqqqq"};
}
Clicking the button behaves as expected - the input value on the page becomes "qqqqq". So the data binding seems correct.
However, if I type anything into the field first and then press the button, the input value does not change on the page - the input field keeps the value I typed. Why is that?
What I'm really trying to do is clear the field, I'm just using "qqqqq" for illustration - setting the value to null has the same behavior.
It works:
Script:
angular.module('myapp',[])
.controller('myctrl',function($scope){
$scope.search = {text:'some input'};
$scope.clearSearch = function () {
$scope.search={text:null};
}
});
Markup:
<div ng-app="myapp" ng-controller="myctrl">
<input type="text" ng-model="search.text"/>
<button ng-click="clearSearch()">clear</button>
</div>
In plunker