如何将数据传递到控制器并返回到Angular中的视图？

Question

I have the following function that adds a comma every 3 characters as you type, so for example 1000 with return 1,000

http://plnkr.co/edit/TL8hlIxyPbwUNCbLiKgs?p=preview

But the function is specific to that input field's ng-model . How do I return the value of $scope.item.price back to the view in a way that I can reuse the function with any input field? Such as using x instead of item.price in the function.

Perhaps using return or maybe writing a directive, but not sure how to do that.

HTML

<input type="text" name='' ng-model='item.price' ng-change='addCommas(item)' />

JS

    $scope.addCommas = function(item){
        price = item.price
        if (price){
            $scope.item.price_clean = price = price.replace(/,/g, '')
            $scope.item.price = price.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
            if (price.indexOf('.') > -1) {
                varSplit = price.toString().split('.');
                varSplit[0] = varSplit[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
                varSplit[1] = varSplit[1].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
                $scope.item.price = varSplit.join('.');
            }
        }
  }

The solution I'm looking for would be something along these lines:

<input ng-model="item.price" ng-change="addCommas(item.price)"/>

$scope.addCommas = function(x) {
  if (x) {
    // functions here, only working with 'x', not with item or price.
    return x
  }
}

Like, for example, the following:

function double(x) {
  return x * 2
}

Answer 1

I think the best way is to convert your function into directive:

app.directive('addCommas', function() {
    return {
      scope: {
          'ngModel': '='
      },
      link: function ($scope, element, attrs) {
        $scope.$watch('ngModel',function() {
          var value = $scope.ngModel.toString();
          //console.log(value)
          if (value){
            value = value.replace(/,/g, '')
            $scope.ngModel = value.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
            if (value.indexOf('.') > -1) {
              varSplit = value.toString().split('.');
              varSplit[0] = varSplit[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
              varSplit[1] = varSplit[1].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
              $scope.ngModel = varSplit.join('.');
            }
          }
        });
      }
    }
  });

And HTML:

 <input type="text" name='' ng-model='item.price' add-commas/>

The directive "binds" to the input's ng-model , watches for changes and applies the transformation.

Here is plunker .

Two more versions: directive which binds to item with price property and stand-alone directive with own template .

Answer 2

I have a fully functioning directive you can model after.

Feel free to modify this for your own use but it basically accomplishes what you want and has some other nice features.

Directive:

angular.module('maskModule').directive('maskTextbox', function ($filter) {
    return {
        restrict: 'E',
        templateUrl:'templates/mask-textbox.html',
        scope: {
            maskDisplayModel: '=?',
            maskModel: '=?',
            maskType: '@',
            maskCurrency: '@',
            placeHolder: '@'
        },
        link: function (scope, element, attr, ctrl) {
            scope.maskDisplayModel = "";
            if (!scope.maskCurrency)
                scope.maskCurrency = "$";
            var t;
            scope.timer = 1;

            if (!scope.placeHolder && scope.maskType == "phone") {
                scope.placeHolder = "Phone..."
            }

            if (!scope.placeHolder && scope.maskType == "currency") {
                scope.placeHolder = "Amount..."
            }

            if (!scope.placeHolder && (scope.maskType == "number" || scope.maskType == "decimal" || scope.maskType == "alpha")) {
                scope.placeHolder = "Type here..."
            }

            scope.countdown = function () {
                if (scope.timer == 0) {
                    scope.changeAction()
                } else {
                    scope.timer -= 1;
                    t = setTimeout(function () {
                        scope.countdown();
                    }, 750);
                }
            };

            scope.resetTimer = function () {
                scope.timer = 1;
                clearTimeout(t);
                scope.countdown();
            };

            scope.changeAction = function () {
                if (scope.maskType == "number") {
                    scope.maskModel = scope.maskDisplayModel.replace(/[^0-9]/g, '');
                    scope.maskDisplayModel = scope.maskDisplayModel.replace(/[^0-9]/g, '');
                }
                if (scope.maskType == "decimal") {
                    scope.maskModel = scope.maskDisplayModel.replace(/[^0-9.]/g, '');
                    scope.maskDisplayModel = scope.maskDisplayModel.replace(/[^0-9.]/g, '');
                }
                if (scope.maskType == "phone") {
                    scope.maskModel = scope.maskDisplayModel.replace(/[^0-9-()]/g, '');
                    scope.maskDisplayModel = scope.maskDisplayModel.replace(/[^0-9]/g, '');
                    scope.maskDisplayModel = $filter("tel")(scope.maskDisplayModel)
                }
                if (scope.maskType == "alpha") {
                    scope.maskModel = scope.maskDisplayModel.replace(/[^A-maska-mask]/g, '');
                    scope.maskDisplayModel = scope.maskDisplayModel.replace(/[^A-maska-mask]/g, '');
                }
                if (scope.maskType == "currency") {
                    scope.maskModel = scope.maskDisplayModel.replace(/[^0-9.]/g, '');
                    scope.maskDisplayModel = scope.maskDisplayModel.replace(/[^0-9.]/g, '');
                    scope.maskDisplayModel = $filter("currency")(scope.maskDisplayModel, scope.maskCurrency)
                }
            };

            scope.initiate = function () {
                if (scope.maskType == "number") {
                    scope.maskModel = scope.maskModel.replace(/[^0-9]/g, '');
                    scope.maskDisplayModel = scope.maskModel.replace(/[^0-9]/g, '');
                }
                if (scope.maskType == "decimal") {
                    scope.maskModel = scope.maskModel.replace(/[^0-9.]/g, '');
                    scope.maskDisplayModel = scope.maskModel.replace(/[^0-9.]/g, '');
                }
                if (scope.maskType == "phone") {
                    scope.maskModel = scope.maskModel.replace(/[^0-9-()]/g, '');
                    scope.maskDisplayModel = $filter("tel")(scope.maskModel);
                }
                if (scope.maskType == "alpha") {
                    scope.maskModel = scope.maskModel.replace(/[^A-Za-z]/g, '');
                    scope.maskDisplayModel = scope.maskModel.replace(/[^A-Za-z]/g, '');
                }
                if (scope.maskType == "currency") {
                    scope.maskModel = scope.maskModel.replace(/[^0-9.]/g, '');
                    scope.maskDisplayModel = $filter("currency")(scope.maskModel, scope.maskCurrency, 2);
                }

            };

            scope.initiate();
        }
    }
});

Template:

<input type="text" ng-model="maskDisplayModel" ng-blur="changeAction()" placeholder="{{placeHolder}}"/>

HTML referencing directive:

<mask-textbox mask-model="myText" mask-type="phone"></mask-textbox>