Angular 如何将数据传递给控制器并传回视图?
How to pass data to controller and back to the view in Angular?
我有以下功能,在您键入时每 3 个字符添加一个逗号,例如 1000
和 return 1,000
http://plnkr.co/edit/TL8hlIxyPbwUNCbLiKgs?p=preview
但是该函数特定于该输入字段的 ng-model
。我如何 return $scope.item.price
的值返回到视图,以便我可以在任何输入字段中重用该函数?比如在函数中使用x
代替item.price
。
也许使用 return
或者编写指令,但不确定如何去做。
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, ',')
if (price.indexOf('.') > -1) {
varSplit = price.toString().split('.');
varSplit[0] = varSplit[0].replace(/(\d)(?=(\d{3})+$)/g, ',');
varSplit[1] = varSplit[1].replace(/(\d)(?=(\d{3})+$)/g, ',');
$scope.item.price = varSplit.join('.');
}
}
}
我正在寻找的解决方案大致如下:
<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
}
}
例如,如下所示:
function double(x) {
return x * 2
}
我认为最好的方法是将函数转换为指令:
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, ',')
if (value.indexOf('.') > -1) {
varSplit = value.toString().split('.');
varSplit[0] = varSplit[0].replace(/(\d)(?=(\d{3})+$)/g, ',');
varSplit[1] = varSplit[1].replace(/(\d)(?=(\d{3})+$)/g, ',');
$scope.ngModel = varSplit.join('.');
}
}
});
}
}
});
和HTML:
<input type="text" name='' ng-model='item.price' add-commas/>
输入 ng-model
的指令 "binds",观察变化并应用转换。
这里是plunker.
另外两个版本:directive which binds to item with price property and stand-alone directive with own template.
我有一个功能齐全的指令,您可以仿照它。
您可以随意修改它以供您自己使用,但它基本上可以完成您想要的并且还有一些其他不错的功能。
指令:
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();
}
}
});
模板:
<input type="text" ng-model="maskDisplayModel" ng-blur="changeAction()" placeholder="{{placeHolder}}"/>
HTML 引用指令:
<mask-textbox mask-model="myText" mask-type="phone"></mask-textbox>
我有以下功能,在您键入时每 3 个字符添加一个逗号,例如 1000
和 return 1,000
http://plnkr.co/edit/TL8hlIxyPbwUNCbLiKgs?p=preview
但是该函数特定于该输入字段的 ng-model
。我如何 return $scope.item.price
的值返回到视图,以便我可以在任何输入字段中重用该函数?比如在函数中使用x
代替item.price
。
也许使用 return
或者编写指令,但不确定如何去做。
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, ',')
if (price.indexOf('.') > -1) {
varSplit = price.toString().split('.');
varSplit[0] = varSplit[0].replace(/(\d)(?=(\d{3})+$)/g, ',');
varSplit[1] = varSplit[1].replace(/(\d)(?=(\d{3})+$)/g, ',');
$scope.item.price = varSplit.join('.');
}
}
}
我正在寻找的解决方案大致如下:
<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
}
}
例如,如下所示:
function double(x) {
return x * 2
}
我认为最好的方法是将函数转换为指令:
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, ',')
if (value.indexOf('.') > -1) {
varSplit = value.toString().split('.');
varSplit[0] = varSplit[0].replace(/(\d)(?=(\d{3})+$)/g, ',');
varSplit[1] = varSplit[1].replace(/(\d)(?=(\d{3})+$)/g, ',');
$scope.ngModel = varSplit.join('.');
}
}
});
}
}
});
和HTML:
<input type="text" name='' ng-model='item.price' add-commas/>
输入 ng-model
的指令 "binds",观察变化并应用转换。
这里是plunker.
另外两个版本:directive which binds to item with price property and stand-alone directive with own template.
我有一个功能齐全的指令,您可以仿照它。
您可以随意修改它以供您自己使用,但它基本上可以完成您想要的并且还有一些其他不错的功能。
指令:
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();
}
}
});
模板:
<input type="text" ng-model="maskDisplayModel" ng-blur="changeAction()" placeholder="{{placeHolder}}"/>
HTML 引用指令:
<mask-textbox mask-model="myText" mask-type="phone"></mask-textbox>