Question

我有一个显示一些信息的输入字段：

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

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

＆＃34;数＆＃34; model等于10的值。我还有动态变量＆＃34; x＆＃34;范围0-24。条件是：if＆＃34; x＆gt; 23＆＃34;那么而不是原来的＆＃34;数字＆＃34;模型值10，我需要显示＆＃34; - ＆＃34;。

我认为这可以使用附加指令＆＃34; data-transformer =＆＃34;＆＃34;＆＃34;

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;
            });
        }
    };
});

然而，这并不像我想的那样工作：它只在第一次工作，页面加载和＆＃34; x＆＃34;设置，但如果＆＃34; x＆＃34;价值变化没有任何反应我有点理解为什么会这样（因为变压器指令仅在＆＃34;数字＆＃34;模型改变时起作用，而不是＆＃34; x＆＃34;）。

我想知道什么，我怎样才能达到我需要的结果？

Answer 1

如果您可以在非输入元素中显示数字，可以使用过滤器解决它，或者您可以使用监视并将输入的ng模型绑定到转换后的表示：）

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);
    });
}]);

angularjs数据转换

1 个答案: