angularjs数据转换

Question

我有一个输入字段，其中显示了一些信息：

<input type="text" id="1" data-transformer="" data-ng-model="number"/>

我需要的是根据某个变量更改显示的信息，例如：

"number“模型等于值10。我还有一个动态变量"x”，它的范围是0-24。条件是:如果"x > 23“，那么我需要显示"--”，而不是原来的"number“模型值10。

我认为使用其他指令“data-transformer=”可以做到这一点。

mbg.directive('transformer', function () {
    return {
        require: 'ngModel',
        link: function (s, e, a, m) {
            m.$formatters.unshift(function (model) {
                s.tmp = model;
                return (s.x > 23 ? '--' : model);
            });

            m.$parsers.push(function () {
                return s.tmp;
            });
        }
    };
});

然而，这并不像我希望的那样工作:它只在第一次工作，页面被加载并设置了"x“，但如果"x”值改变，什么也不会发生。我有点理解为什么会这样(这是因为transformer指令只在"number“模型改变时才起作用，而不是"x")。

我想知道的是，我如何才能达到我想要的结果？

Answer 1

如果可以在非输入元素中表示数字，或者可以使用监视并将输入ng-model绑定到转换后的表示形式，则可以使用过滤器来解决此问题:)

http://jsfiddle.net/HB7LU/8784/

HTML

Input: <input data-ng-model="number" />
<hr>
<h2>Filter</h2>
<span ng-bind="number | transformer"></span>
<hr>
<h2>Watch</h2>
<div ng-controller="transformerController">
    <input ng-model="transformedNumber" readonly />
</div>

JS

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

myApp.filter('transformer', function () {
    return function (input, target) {
         return (input > 23 ? '--' : input);
    }
});


myApp.controller('transformerController', ['$scope', function ($scope) {
    $scope.$watch('number', function(value) {
        $scope.transformedNumber = (value > 23 ? '--' : value);
    });
}]);