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/

Answer 1

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>

Answer 2

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

Answer 3

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>