1

ステータスを変更するボタンがあります（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>

しかし、ボタンをクリックしても、パラメーターが STOPPED に設定されているのに STARTED にスタックしている状態は切り替わりません。

問題を再現するプランカー。

編集：より良い例

最初の回答では、フィルターを削除することで機能しましたが、保持したいと思います。そこで、ボタンがレンダリングされ、ボタンをクリックするとデータの内容がインクリメントされる例を作成しました。最初のクリック後にカウンターがスタックします。

初期化：<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)。

修正されたプランカー

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 に答える