1

我有一个按钮来更改状态（已启动/已停止）。该按钮是在 ng-grid 的单元格中创建的。

单元格定义为{field:'status', displayName:'Status', cellTemplate: 'cell/statusCellTemplate.html'}]模板所在的位置

<button class="btn btn-primary" ng-click="changeStatus(row.getProperty('id'),'{{row.getProperty(col.field) | switchStatus}}')">{{row.getProperty(col.field)}}</button>

myapp.filter('switchStatus', function() {
    return function(input) {
        return (input == 'STOPPED') ? 'STARTED' : 'STOPPED';
    };
});

在 Plunker 中，初始状态为 STOPPED，因此渲染的单元格为

<button class="btn btn-primary ng-scope ng-binding" ng-click="changeStatus(row.getProperty('id'),'STARTED')">STOPPED</button>

然后单击按钮按预期切换状态，呈现的单元格为

<button class="btn btn-primary ng-scope ng-binding" ng-click="changeStatus(row.getProperty('id'),'STOPPED')">STARTED</button>

但是点击按钮不会切换状态，状态是卡在STARTED，而参数设置为STOPPED。

重现问题的Plunker。

编辑：更好的例子

第一个答案通过删除过滤器使其工作，但我想保留它。因此，我创建了一个示例，其中呈现了一个按钮，单击该按钮会增加数据的内容。第一次点击后计数器被卡住。

在里面：<button class="btn btn-primary ng-scope" ng-click="increment(1)">Increment</button>

点击：<button class="btn btn-primary ng-scope" ng-click="increment(2)">Increment</button>

点击：<button class="btn btn-primary ng-scope" ng-click="increment(2)">Increment</button>应该是increment(3)。

修改后的Plunker

4

1 回答 1

0

为了让这个笨拙的人工作，我改变了几件事。

首先，在您的单元格模板中，该changeStatus方法不需要围绕当前状态进行插值。所以这：

changeStatus(row.getProperty('id'),'{{row.getProperty(col.field) | switchStatus}}')"

改为：

 changeStatus(row.getProperty('id'),row.getProperty(col.field))"

其次，您会注意到我去掉了单元格模板内的过滤器。这将具有$filter再次调用并反转切换的效果。

最后，我注意到切换逻辑被颠倒了。所以我改变了这个：

$scope.changeStatus= function(id, status) {
  console.log(status);
  $scope.currentStatus = status;
  if(status == 'STOPPED') {
    $scope.myData = [{status: 'STOPPED'}];
  } else {
    $scope.myData = [{status: 'STARTED'}];
  }
  $scope.nextStatus = $filter('switchStatus')(status);
}

对此：

$scope.changeStatus= function(id, status) {
  console.log(status);
  $scope.currentStatus = status;
  if(status == 'STOPPED') {
    $scope.myData = [{status: 'STARTED'}];
  } else {
    $scope.myData = [{status: 'STOPPED'}];
  }
  $scope.nextStatus = $filter('switchStatus')(status);
}

现在一切似乎都在工作。希望这可以帮助。

于 2013-08-26T22:29:41.637 回答