我也是 angularjs 新手,但您不会通过 javascript 视图模型提供属性来处理这个问题吗?
例如有一个 style 字段,该字段根据日期字段更改(即,如果差异为 10 天,样式返回样式 1),并希望通过 angularjs 绑定,更新将传播到屏幕.
我认为正确的术语是计算属性或计算属性
编辑
不确定这是否是您要查找的内容,但请参见 fiddle,例如计算日期差异和更改样式均基于视图模型(范围)的属性
scope.diff 和 scope.col 是要绑定的 2 个属性
http://jsfiddle.net/chrismoutray/wfjv6/
HTML
<script src="http://code.angularjs.org/0.10.4/angular-0.10.4.min.js" ng:autobind></script>
<div ng:controller="ComputedPropertiesCtrl">
first date <input ng:model="firstdate"> second date <input ng:model="seconddate"> difference {{diff}}
<div>when the difference is greater than 10 color changes to green</div>
<div>eg set the second date to 15/01/2013</div>
<div style="background-color:{{col}};"> State </div>
</div>
JS
function ComputedPropertiesCtrl() {
var scope = this;
scope.firstdate = '01/01/2013';
scope.seconddate = '10/01/2013';
scope.data_before = [];
scope.differenceInDays = function() {
var dt1 = scope.firstdate.split('/'),
dt2 = scope.seconddate.split('/'),
one = new Date(dt1[2], dt1[1]-1, dt1[0]),
two = new Date(dt2[2], dt2[1]-1, dt2[0]);
var millisecondsPerDay = 1000 * 60 * 60 * 24;
var millisBetween = two.getTime() - one.getTime();
var days = millisBetween / millisecondsPerDay;
return Math.floor(days);
};
scope.color = function() {
return (scope.differenceInDays() > 10) ? 'green' : 'red';
};
scope.$watch('[firstdate, seconddate]', function(currScope,newVal,oldVal) {
scope.data_before = oldVal;
scope.diff = scope.differenceInDays();
});
scope.$watch('[firstdate, seconddate]', function(currScope,newVal,oldVal) {
scope.data_before = oldVal;
scope.col = scope.color();
});
}
CSS
h2 { position: fixed; right: 10px; top: 10px; color: red; background:white;z-index:1000; }
input { width: 100px; }
div { margin: 10px; padding: 10px; }