Get all input fields onblur

Question

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?

@StepanKasyanenko I need all the values for a external filter — Citizen SP, Sep 15 '16 at 07:20

score 0 · Accepted Answer · edited May 23 '17 at 12:01

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);
};

score 0 · Answer 2 · answered Sep 15 '16 at 07:29

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.

Get all input fields onblur

2 Answers2

The solution