Question

我有一个更改状态的按钮（STARTED / STOPPED）。该按钮在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

Answer 1

为了让这个plunker正常工作，我做了一些改变。

首先，在您的单元格模板中，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);
}

所有人现在似乎都在努力。希望这会有所帮助。

第一次单击后按钮动态ng-click卡住

1 个答案: