Кнопка динамического ng-click застревает после первого щелчка

Question

У меня есть кнопка для изменения статуса (НАЧАЛО/ОСТАНОВЛЕН). Кнопка создана в ячейке 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>

Но нажав на кнопку не переключает статус, который прилип к НАЧАТЬ тогда как параметр установлен в STOPPED.

Plunker, который воспроизводит проблему.

Edit: Лучше пример

Первый ответ заставил его работать, удаляя фильтр, но я хочу, чтобы сохранить его. Поэтому я создал пример, в котором отображается кнопка, и нажатие кнопки увеличивает количество данных. Счетчик застревает после первого щелчка.

Init: <button class="btn btn-primary ng-scope" ng-click="increment(1)">Increment</button>

Click: <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); 
} 

Все, кажется, работает. Надеюсь это поможет.