angularjs form, input value changed programmatic(by code) not submitted to controller

Question

my problem is that after change input value by code or any plugin new value not submitted to controller and old value of property is accessible. but if change input value by typing new value is available! only by typing! template :

 <input class="form-control" id="ng-taskLineBackColor" 
       type="text" ng-model="data.preference.lineBackColor"/>

 <input type="submit" ng-click="update()"  class="btn btn-primary" value="save"/>

controller :

.controller('taskCtrl', ['$scope', function ($scope) {

        $scope.getRef = function () {
            return //any code
        };
        $scope.save = function () {
             var newValue = $scope.data.preference.lineBackColor;
             //!!!-->newValue Contain old Value

        };
    }])

Chet · Accepted Answer · 2015-07-21 20:42:31Z

6

Any code which changes the value of ng-taskLineBackColor needs to trigger a special event called "input". This will notify AngularJS

$(function() {
    $('#ng-taskLineBackColor').val('new value').trigger('input');
});

answered Jul 21, 2015 at 20:42

Chet

3,7391 gold badge23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fagner Brack Over a year ago

Does this behavior really exists in Angular? A.K.A. is it documented?

Jan Molak · Accepted Answer · 2017-02-25 23:44:45Z

2

To do this only with jQlite and without jQuery try:

angular.element(document.querySelector('#ng-taskLineBackColor')).triggerHand‌ler('input')

And here's the API you have available on an angular.element-wrapped HTML element:

https://docs.angularjs.org/api/ng/function/angular.element

answered Feb 25, 2017 at 23:44

Jan Molak

4,5442 gold badges38 silver badges33 bronze badges

Comments

Artyom Pranovich · Accepted Answer · 2014-03-07 07:18:45Z

0

I create working JSfiddle for your case.

JSfiddle

 <input class="form-control" id="ng-taskLineBackColor" 
       type="text" ng-model="data.preference.lineBackColor"/>
 <input type="submit" ng-click="update()"  class="btn btn-primary" value="save"/>

I renamed function "save", declared in controller on "update".

UPDATE:

function MyCtrl($scope) {
    $scope.update = function () {
        var value = $scope.data.preference.lineBackColor;
        alert("Typing value = '" + value + "'");
        $scope.data.preference.lineBackColor = "Value from code";
        var newValue = $scope.data.preference.lineBackColor;
        alert("Typing value = '" + newValue + "'");
    };
}

edited Mar 7, 2014 at 7:18

answered Mar 7, 2014 at 6:23

Artyom Pranovich

6,9728 gold badges44 silver badges60 bronze badges

5 Comments

sajjad Over a year ago

no!my condition is that value modified by code.for time typing value there is no problem.

sajjad Over a year ago

thanks for your trying but pay attention to this subject: modify programaticall(by code) html element value you modify property of object!.in this sample change input value by any code or plug in then get new value!thanks

Artyom Pranovich Over a year ago

@sajjad, what you mean under "html element value"? Value, which shows in input?

sajjad Over a year ago

yes. ok! for this sample html element value is value of input text type.

Artyom Pranovich Over a year ago

@sajjad, in my JSfiddle example, I change value of input text at controller. $scope.data.preference.lineBackColor = "Value from code"; After that, you will see new text-value in input.

Collectives™ on Stack Overflow

angularjs form, input value changed programmatic(by code) not submitted to controller

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related