我的模型中有一个status
深度嵌套到3个级别,我想根据status
的值将不同的类应用于div。为了保存输入并保持html整洁,我想将短名称应用于此状态,因此我使用ng-init
复制值并在ng-class
变量上使用ng-init
。但是ng-init
只获得一次值,当我在控制器中再次更改状态时它不会改变但保留旧值。 有没有办法在div中至少为response.obj1.obj2.status
提供短名称?
<div ng-app="app">
<div ng-controller="statusCtrl">
<button ng-click="toggle()">toggle</button>
<div id="section1" ng-init="s1Status=response.section1.status">
<div id="statusIndicator" ng-class="{'success':s1Status==0,'error':s1Status==1}">Status</div>
</div>
<span>{{response.section1.status}}</span>
</div>
var app = angular.module('app', [])
app.controller('statusCtrl', function ($scope) {
$scope.response = {
section1: {
status: 1
}
};
$scope.toggle = function () {
if ($scope.response.section1.status === 0) $scope.response.section1.status = 1;
else $scope.response.section1.status = 0;
}
});
演示:http://plnkr.co/edit/ES7rgf97BPFAWzkfIEhw?p=preview
编辑:
Knockout JS 有很好的方法可以做到这一点,你可以将任何级别的模型绑定到div,并且div中引用的任何模型都可以使用parnet模型作为上下文。这就是我在寻找的东西。
<div id="section1" data-bind="response.section1">
<div id="statusIndicator" data-bind=" css:{success:status==0, error:status=1 }">Status</div>
</div>