Angular Ngmodel Different View And Value

Does ngModel controller in directive have any option to show something different from ngModel value in view, or i have to write custom html directive for input? I wrote a comma-sep

Solution 1:

use filter to achieve this

HTML

<divng-controller="demoController"><inputtype="text"value="{{val | number}}"></div>

controller:

var app = angular.module('demoApp', []);

app.controller('demoController', ['$scope', '$http', function($scope, $http, $cookies, $location){
     $scope.val = 1000000;
}]);

Solution 2:

You can use ngModel.$formatters:

ngModel.$formatters.push(function (number) {
    return convertToCommaSeparatedString(number);
});

In this case model will remain number but input will show formatted string.

See documentation

Solution 3:

To answer your question...

"I mean can i have input with value 1000000 but it shows 1,000,000 in view?"

I'm assuming you want a Number as the model, but a comma separated String in the input as the user types. Based on this assumption, I can answer your question with a YES, you can do this; here's how...

Link: CodePen Working Example

NOTE

This example is created in a way that will only allow digits to be entered in to the input. You can change this as you like in each $filter.

Also a word of caution to only use filters that you create that clean the data when it enters the filter. Angular filters are mostly for static values, so they don't work when you want to filter values as they are entered.

i.e. In this case, if we didn't clean the data by removing (/\D/g) all non-digits, we would be splitting, joining, and reversing with commas (and anything else) in the string and the result would crash.

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="inputValueModel"type="text"format-my-view-only />
  Model Value is Number: {{ inputValueModel || "Empty" }}
</div>

JS

var app = angular.module("myApp", []).controller("myCtrl", function($scope){});

app.directive("formatMyViewOnly", function($filter){
// You don't have to use $filter, you can do inline work as well as// functions inside of this directive. I use $filters for code reuse.return {
    require: "ngModel",
    restrict: "A",
    link: function(scope, elem, attrs, input){

      input.$parsers.push(function(value){
        value = $filter("addCommas")(value);
        input.$setViewValue(value); // Set view value.
        input.$render();
        // Then return Number to model.return +$filter("onlyNumbers")(value); // Unary Operator converts string to Number. Remove it if you want model to be a string as well.
      });
    } // end link.
  }; // end return.
});


app.filter('onlyNumbers', function(){
  returnfunction(numbers){
    if(invalid(numbers)){ return""; }
    return numbers.replace(/\D/g, "");
  };

  functioninvalid(number){
    return !number || notString(number) || noNumbersExists(number);
  }

  functionnotString(string){
    returntypeof string != "string";
  }

  functionnoNumbersExists(number){
    return number.replace(/\D/g, "").length === 0;
  }
});

app.filter('addCommas', function(){
  returnfunction(stringOfNums){
    if(invalid(stringOfNums)){ return""; }
    returncommaSeparated(stringOfNums.replace(/\D/g, ""));
  };

  functioncommaSeparated(numbers){
    if(!numbers){return"";}
    return numbers.split("").reverse().join("")
      .match(/.{1,3}/g).reverse().join(",");
  }

  functioninvalid(number){
    return !number || notString(number) || noNumbersExists(number);
  }

  functionnotString(string){
    returntypeof string != "string";
  }

  functionnoNumbersExists(number){
    return number.replace(/\D/g, "").length === 0;
  }
});