angularjs数据变换
我有一个显示一些信息的输入字段:angularjs数据变换
<input type="text" id="1" data-transformer="" data-ng-model="number"/>
我需要的是根据例如一些变量来改变显示的信息:
“数量”模型是等于值10.我也有动态变量“x”,范围0-24。条件是:如果“x> 23”,那么而不是原来的“数字”模型值10,我需要显示“ - ”。
我认为这将使用额外的指令是可能的“数据变压器=”“”
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”值改变什么都没有发生。我有点理解为什么它是这样的(这是因为变形指令只在“数字”模型改变时才起作用,而不是“x”)。
我想知道,我如何达到我需要的结果?
您可以用过滤解决它,如果你能在一个非输入元素存在的数量,或者你可以使用一个手表和绑定您的输入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);
});
}]);
有趣的方法,我宁愿第一个解决方案,因为它更清洁,但我确实需要输入字段。第二种解决方案很有趣,但是如何将该值转换回原来的值?并且我需要用一点不同的逻辑来转换这个值“(x> 23?' - ':value)”我将如何得到“x”的值? – 2014-12-04 08:24:05
原始值在$ scope.number上可用,并且转换可在$ scope.transformedNumber上使用。您可以更改手表内的登录名,其值为$ scope.number。 – 2014-12-04 09:05:51
看变量x,如果x> 23更改数字的值 – 2014-12-04 07:14:24
您可以使用控制器中的函数来执行指令,而不是使用指令。或者你可以使用$ watch。 – Ved 2014-12-04 07:16:26
这将工作,但我需要有数字的真正价值。我需要的是有一个信息并显示其他信息,例如symfony2格式的数据转换器。 – 2014-12-04 07:22:10