2016-03-22 32 views
1

この質問にはいくつかの回答/解決策がありますが、Angularjsを使って何かを実装しようとしているのは初めてであるため、Angularjs:アイテムがクリックされたときのアイコンの変更方法

私はそれをクリックすると、その情報が表示されているとき、私はその中にアイコンを変更したいです時にいくつかの情報を展開しdiv(タイトル)を持っている...

これは私のコードです:

<div class="title" ng-click="view_variables(request)"> 
    <i class="glyphicon glyphicon-chevron-right"></i> 
</div> 

そして、div要素はもう、拡張情報が表示されませんので、これは私がしようとしたものですが、動作していない:

<div class="title" ng-click="view_variables(request) = !view_variables(request)"> 
    <i ng-class="{'glyphicon glyphicon-chevron-right':!view_variables(request), 'glyphicon glyphicon-chevron-left': view_variables(request)}"></i> 
</div> 

コントローラーコード:

$scope.view_variables = function(req){ 
    if (!req.enabled_variables && !req.disabled_variables) { 
     $http.get('/api/files/' + $scope.file_id + '/requests/' + req.id + '/variables') 
     .success(function(data){ 
      variables = data.data; 
      req.enabled_variables = []; 
      req.disabled_variables = []; 
      for (i=0; i<variables.length; i++) { 
       if (variables[i].disabled == true) { 
        req.disabled_variables.push(variables[i]); 
       } else { 
        req.enabled_variables.push(variables[i]) 
       } 
      } 
     }); 
    } 

    req.show_variables = !req.show_variables; 
} 
+0

で uはちょうど –

答えて

2

のように見えるので、それは常にfalseとして扱われます。

あなたはこのような何かしたい:あなたはとても似ng-if directiveを使用することができ

<div class="title" ng-click="view_variables(request)"> 
    <i class="glyphicon glyphicon-chevron-right" ng-show="!view_variables(request)"></i> 
    <i class="glyphicon glyphicon-chevron-left" ng-show="view_variables(request)"></i> 
</div> 

<div class="title" ng-click="view_variables(request)"> 
    <i class="glyphicon glyphicon-chevron-right" ng-if="!view_variables(request)"></i> 
    <i class="glyphicon glyphicon-chevron-left" ng-if="view_variables(request)"></i> 
</div> 

が真view_variables(request)リターンを想定し

<div class="title" ng-click="view_variables(request)"> 
    <i ng-class="{'glyphicon glyphicon-chevron-right':!request.show_variables, 'glyphicon glyphicon-chevron-left': request.show_variables}"></i> 
</div> 
+0

ありがとうコントローラのコードを表示することができます!これは予想よりも簡単でした:) – Valip

0

ng-click属性で問題が起こっていると思います。 "view_variables(request)=!view_variables(request)"を使用すると、view_variables関数を2回呼び出さないのですか?また、関数呼び出しに値を代入するのは奇妙に思えます。

コードの最初の行にあるようにng-click = "view_variables(request)"のままにしておき、view_variables関数をスコープ($ scope.data.view_vars)のどこかにブール値を設定して、あなたのi要素のng-classを決定してください。

幸運を祈る!

--edit:今、あなたのコントローラーを設置したので、req.show_variablesはview_variables関数は何も返さない有用な候補

0

ng-show directiveを使用して、この方法で良いかもしれませんがまたは偽...おそらくのためにそれを置き換えることができます。

+2

'view_variables'関数は実際に動作します(' request.show_variables'をトグルし、 '$ http'要求を条件付きで実行する)ので、' ng-if' 。 'ng-if'の条件はすべてのダイジェストループで評価されるため、結果は非決定的になります。 –

+0

@Jack A.それは本当です... ng-showはもっと適切でしょうか? –

+0

すべてのダイジェストサイクル( 'ng-if'や' ng-show'など)で評価されるものにバインドするものは、一貫した値を持つ必要があります。パフォーマンスのためには、関数ではなく変数にバインドする方がよいでしょう。関数呼び出しは 'ng-click'のようなイベントハンドラのために残されるのが最も良いのです。なぜなら、それらはイベントがトリガされたときだけ呼び出されるからです。 –

0

ng-classの中で関数を呼び出すことは悪い考えです。なぜあなたはそれのためのフラグを使用しないでください。

例えば、

$scope.view_variables = function(request){ 
    //your code 

    $scope.isExpanded = !$scope.isExpanded; 
}; 

controller-

内側とhtml

<div class="title" ng-click="view_variables(request)"> 
    <i class="glyphicon" ng-class="{'glyphicon-chevron-right':!isExpanded, 'glyphicon-chevron-left':isExpanded}"></i> 
</div> 
関連する問題