Angular ngModel 不同的视图和值 [英] Angular ngModel different view and value

问题描述

指令中的 ngModel 控制器是否有任何选项可以在视图中显示与 ngModel 值不同的内容，或者我必须为输入编写自定义 html 指令?
我写了一个逗号分隔符指令.一切都很好，但是 ngModel 值从 Number 更改为 String with ,.
我的意思是我可以输入值为 1000000 但它在视图中显示 1,000,000 吗?

更新:
在输入框中显示1,000,000，但其值为1000000.

更新 2
我知道 $formatters 和 $parsers.但问题是 $formatters 不会损害实际值，但是当 ngModel 直接更改时它可以工作，而不是通过输入输入元素，并且 $parsers 观察所有更改，但是也改变实际价值.

解决方案

使用过滤器来实现

HTML

<input type="text" value="{{val | number}}">

控制器:

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

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

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-separator directive. everything is fine, but ngModel value change from Number to String with ,.
I mean can i have input with value 1000000 but it shows 1,000,000 in view?

Update:
In the input box shows 1,000,000, but its value be 1000000.

Update 2
I know about $formatters and $parsers. but the problem is $formatters doesn't harm real value, but it works when ngModel changed directly, not by typing in input element, and $parsers watch all changes, but change real value too.

解决方案

use filter to achieve this

HTML

<div ng-controller="demoController">

<input type="text" value="{{val | number}}">
</div>

controller:

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

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

这篇关于Angular ngModel 不同的视图和值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！