Angularjs：アイテムがクリックされたときのアイコンの変更方法

Question

この質問にはいくつかの回答/解決策がありますが、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; 
} 

Answer 1

のように見えるので、それは常に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> 

Answer 2

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関数は何も返さない有用な候補

Answer 3

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

Answer 4

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>