angularjs not updating model value

Question

In my example I want to update model when user focus the textfield. In short append 'px' string to the existing value.

HTML:

<div ng-app>
  <div ng-controller="PixelCtrl">
  <div>
  {{pixel}}
  </div>
    <input type="text" ng-focus="updatePX($event)" ng-model="pixel" />
  </div>
</div>

JS:

function PixelCtrl($scope) {
  $scope.pixel = "120";

  $scope.updatePX = function(e){
  debugger;
   alert(e.target.value);
    e.target.value = e.target.value + "px";
    $scope.$apply();
  }
}

As you all can see I have also used $scope.$apply. Most likely I am doing something wrong.

JSFIDDLE: https://jsfiddle.net/ashwyn/U3pVM/27621/

Have you considered just adding the px to the binding? For example, {{pixel}}px — james
– james, Commented Oct 6, 2016 at 13:59
I was going to ask the same thing, do you need "px" literally on the model or just to display it? — defaultcheckbox
– defaultcheckbox, Commented Oct 6, 2016 at 14:00
I need 'px' appended to the model so that when I use model value in another scenario then I should get 'px' as well. Also another reason I want to do this way is because there is an extra overhead to the user to always write px after numeric value. — Ashwin
– Ashwin, Commented Oct 6, 2016 at 14:03

Weedoze · Accepted Answer · 2016-10-06 13:59:33Z

2

You don't need to manually add the 'px' text. Simply add it by default

function PixelCtrl($scope) {
  $scope.pixel = "120";
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="PixelCtrl">
    <div ng-show="pixel">
      {{pixel}} px
    </div>
    <input type="text" ng-model="pixel" />
  </div>
</div>

answered Oct 6, 2016 at 13:59

Weedoze

14k2 gold badges38 silver badges65 bronze badges

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

Comments

Mihai Alexandru-Ionut · Accepted Answer · 2016-10-06 14:57:54Z

0

You must include 1.2.1 angular version. Here is your solution: jsfiddle

<div ng-app>
  <div ng-controller="PixelCtrl">
   <div>
      {{pixel}}
   </div>
   <input type="text" ng-focus="updatePX($event)" ng-model="pixel" />
  </div>
</div>



function PixelCtrl($scope) {
   $scope.pixel = "120";
   $scope.updatePX = function(e){
     e.target.value = e.target.value + "px";
     $scope.pixel=e.target.value;
   }
}

edited Oct 6, 2016 at 14:57

answered Oct 6, 2016 at 14:21

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

2 Comments

Ashwin Over a year ago

I checked you fiddle and on focus event (1) I am getting error (2) Model is not updated as updaed value is not shown in div(view)

Mihai Alexandru-Ionut Over a year ago

Now,it works perfectly for me.Please try my jsfiddle !.

Stepan Kasyanenko · Accepted Answer · 2016-10-06 15:20:59Z

As @Alexandru Mihai said, upgrade angular version.

See example on jsfiddle.

angular.module("testApp", [])
  .controller("PixelCtrl", function($scope) {
    $scope.pixel = "120";

    $scope.updatePX = function(e) {
      if ($scope.pixel && $scope.pixel.indexOf("px") === -1)
        $scope.pixel += "px";
    }
  })
  .directive("myPixel", function() {
    return {
      require: "ngModel",
      link: function(scope, element, attr, ngModel) {
        element.on("focus", function() {
          var val = ngModel.$viewValue;
          if (val && val.indexOf("px") === -1) {
            ngModel.$setViewValue(ngModel.$viewValue + "px");
            element.val(ngModel.$viewValue);
          }
        })
      }
    }
  })
  .directive("myPixelBetter", function() {
    return {
      scope: {
        value: "=myPixelBetter"
      },
      link: function(scope, element) {
        element.on("focus", function() {
          if (scope.value && scope.value.indexOf("px") === -1) {
            scope.value += "px";
            scope.$apply();
          }
        })
      }
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="testApp">
  <div ng-controller="PixelCtrl">
    <div>
      {{pixel}}
    </div>
    <div>

      With ng-focus
      <input type="text" ng-focus="updatePX()" ng-model="pixel" />
    </div>
    <div>
      With custom directive
      <input type="text" my-pixel ng-model="pixel" />
    </div>
    <div>
      With custom directive. Better solution
      <input type="text" my-pixel-better="pixel" ng-model="pixel" />
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

angularjs not updating model value

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related