AngularJS:复选框标签在取消选中时保留原始值

时间:2012-12-13 09:44:33

标签: angularjs

请查看http://jsfiddle.net/mahbub/sbNty/4/

<div ng-app="">
  <div ng-controller="Ctrl">
        <ul>
            <li ng:repeat="status in statuses"><label><input type="checkbox" data-ng-model="status.type" data-ng-true-value="closed" data-ng-false-value="{{status.type}}" />{{status.type}}</label></li>
      </ul>
  </div>
</div>​

正如您所看到的,复选框的标签是根据JSON中的状态类型打印的。现在取消选中,标签变为false。在取消选中复选框时,我必须错过一些正确的方法来回到原始标签文本。

我的意思是当我取消选中时,标签需要“打开”或者最初的任何内容。

非常感谢任何帮助。

由于

1 个答案:

答案 0 :(得分:1)

最后,我使用ngInit并在范围对象中设置了一个不同的变量。请参阅此处的演示http://jsfiddle.net/mahbub/sbNty/5/

<div ng-app="">
  <div ng-controller="Ctrl">
        <ul>
            <li ng:repeat="status in statuses"><label><input ng-init="status.oldStat=status.type" type="checkbox" ng-model="value" ng-click="selectV(value,this)">{{status.type}}</label></li>
      </ul>
  </div>
</div>​

控制器:

'use strict';

function Ctrl($scope) {
    $scope.statuses = [{
        id: 1,
        type: 'open'},
    {
        id: 2,
        type: 'open'},
    {
        id: 3,
        type: 'new'},
    {
        id: 4,
        type: 'closed'},
    {
        id: 5,
        type: 'open'},
    {
        id: 6,
        type: 'new'},
    {
        id: 7,
        type: 'open'}
];

    $scope.selectV = function(val, stat) {
        if (val) {
            stat.status.type = "closed";
        } else {
            stat.status.type = stat.status.oldStat;
        }
    }
}​