リスト内の1人のユーザーの状態を変更するにはどうすればよいですか？

Question

私は自分のアプリケーションにログインしているユーザーのリストを持っています.3つの状態（info、success、help）を持つことができ、各ユーザーの横に3つのボタンがあります。ユーザーが特定のボタンをクリックすると、そのボタンのクラスを変更したいが、私はここで立ち往生している。何人かのユーザーのボタンをクリックすると、アプリケーションに最初に記録されたユーザーの状態が変わるからだ。 ）。

は、ここに私のhtmlです：

<ul class="list-unstyled" style="color:white; font-size:20px; 
    margin-top:-10px; margin-left:-14.5px"> 
     <li style="padding: 15px 0px 15px 30px; border-bottom:solid #0A2A0A; 
     margin-right:-14.5px" ng-repeat="user in users"> 
      {{user.username}} 
      <span style="padding-right:15px"></span> 
      <div class="btn-group btn-group-md" role="group" aria-label="..."> 
       <button id="info" type="button" class="btn btn-info" 
       ng-click="info(user.username)"> 
        <i class="glyphicon glyphicon-pencil"></i> 
       </button> 
       <button id="success" type="button" class="btn btn-default" 
       ng-click="success(user.username)"> 
        <i class="glyphicon glyphicon-ok"></i> 
       </button> 
       <button id="help" type="button" class="btn btn-default" 
       ng-click="help(user.username)"> 
        <i class="glyphicon glyphicon-question-sign"></i> 
       </button> 
      </div> 
     </li> 
    </ul> 

、ここでそのhtmlのためのコントローラである：

taskApp.controller('TaskNumController', function($scope, $route, $routeParams){ 
     $scope.tasks = $route.current.locals.task; 
     $scope.users = $route.current.locals.users; 

     $scope.success = function(name){ 
      $('#info').removeClass('btn-info').addClass('btn-default'); 
      $('#success').removeClass('btn-default').addClass('btn-success'); 
      $('#help').removeClass('btn-danger').addClass('btn-default'); 
     }; 
     $scope.help = function(name){ 
      $('#info').removeClass('btn-info').addClass('btn-default'); 
      $('#success').removeClass('btn-success').addClass('btn-default'); 
      $('#help').removeClass('btn-default').addClass('btn-danger'); 
     }; 
     $scope.info = function(name){ 
      $('#info').removeClass('btn-default').addClass('btn-info'); 
      $('#success').removeClass('btn-success').addClass('btn-default'); 
      $('#help').removeClass('btn-danger').addClass('btn-default'); 
     }; 
    }); 

taskAppは私のモジュールの名前です。

誰でも手伝ってもらえますか？私はとても感謝しています:)

Answer 1

この場合、最も良いことは、要素のng-class属性を利用し、コントローラのスタイルの変更を処理しないことです。

コントローラ

taskApp.controller('TaskNumController', function($scope, $route, $routeParams){ 
     $scope.tasks = $route.current.locals.task; 
     $scope.users = $route.current.locals.users; 
     $scope.setUserStatus = function(user, status){ 
      user.status = status; 
     } 
    }); 

ビュー

<div class="btn-group btn-group-md" role="group" aria-label="..."> 
       <button id="info" type="button" class="btn" 
       ng-click="setUserStatus(user, 'info')" ng-class="{'btn-info': user.status === 'info', 'btn-default': user.status !== 'info' }"> 
        <i class="glyphicon glyphicon-pencil"></i> 
       </button> 
       <button id="success" type="button" class="btn btn-default" 
       ng-click="setUserStatus(user, 'success')" ng-class="{'btn-success': user.status === 'success', 'btn-default': user.status !== 'success' }"> 
        <i class="glyphicon glyphicon-ok"></i> 
       </button> 
       <button id="help" type="button" class="btn btn-default" 
       ng-click="setUserStatus(user, 'help')" ng-class="{'btn-danger': user.status === 'help', 'btn-default': user.status !== 'help' }"> 
        <i class="glyphicon glyphicon-question-sign"></i> 
       </button> 
      </div> 

は、これは、各ユーザーのステータスを維持する必要があることを意味しますが、それは契約の大きすぎるすべきではありません。代わりに、関数を呼び出すのではなく、ng-click = "user.status = 'info';"のようにng-clickでステータスを設定することもできますが、コントローラが実際に処理する場合は、それ。