web-dev-qa-db-ja.com

ng-clickイベントの切り替え

Ng-tableの行を切り替えてクリックで展開する関数を作成できましたが、もう一度クリックしても非表示になりません。 JavaScriptの関数は次のとおりです。

$scope.toggle = function() {
    return !this.booleanVal;
};

booleanValはjsonファイルの値です（各行に独自の値が含まれています）。次にHTMLで。

<p class="row_description more" ng-click="row.booleanVal = toggle()">{{row.description}</p>
<div class="check-element animate-show" ng-show="row.booleanVal">

最初のクリックに対して機能し、以前はfalseであったbooleanValをtrueに変換しますが、toggleをfalseに戻すことはできません。何が問題になっているのですか？

angularjstoggleangularjs-ng-click
9
Kylie Moden

これを試して：

<p class="row_description more" ng-click="row.booleanVal = !row.booleanVal">
    {{row.description}
</p>
<div class="check-element animate-show" ng-show="row.booleanVal"></div>
24
Mathew Berg

こんにちはここを見てください： http://jsbin.com/hefeb/1/edit

  $scope.toogle = function(i)
  {
    i.booleanVal = !i.booleanVal 

  };
2
sylwester

条件演算子を使用することもできます。

これを試して：

<p class="row_description more" 
   ng-click="row.booleanVal =row.booleanVal?false:true">
   {{row.description}}
</p>
<div class="check-element animate-show" ng-show="row.booleanVal"></div>
1
MaheshKumar

次のいずれかを実行できます。

  • toggle()関数でthis.row.booleanValを使用する
  • ngClickディレクティブでブール値を直接切り替えます：ng-click="row.booleanVal = !row.booleanVal"
0
Thomas Roch