anglejsのリスト内の現在の要素にクラスを追加します

Question

私は表形式の構造で表示するリストを1つ持っており、選択のために各リスト項目のチェックボックスを与えています。しかし、私はチェックボックスをクリックして現在の要素を選択したい。私はngクラスのものを試しましたが、それは1つのチェックボックスのクリックですべてのリストを選択しています。以下は私のコードを確認してください。

するlist.html

<div class="surveyList" ng-repeat="survey in allSurveys | filter:global.search"> 
         <span class="checkbox" ng-click="Click()" ng-class="checked"></span> 
         <div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"> 
          <div class="col-xs-5 col-sm-2 col-md-3">{{survey.SurveyName}}</div> 
          <div class="col-sm-3 col-md-4 hidden-xs">{{survey.Date | date:'dd/mm/yyyy'}}</div> 

controller.js '確認' クラスは、すべてに追加取得したもののチェックボックスをクリックするだけで、この中

$rootScope.Click = function(){ 
    $rootScope.surveySelected = !$rootScope.surveySelected; 
    if($rootScope.surveySelected){ 
    $rootScope.checked = 'checked'; 
    }else{ 
    $rootScope.checked = ''; 
    } 
}; 

ng-repeatの要素。 jqueryを使うと、 "this"キーワードを使ってこれを行うことができ、DOMをトラバースすることができます。それでは、anglejsでそれを行う方法は？以下は

作業のスナップショットをクリックする前と後に、このクラスは、のクリックで全てのリストに追加取得された確認

afterclick

beforeclick

です1つのckeckbox

チェックされたステータスに基づいて他の要素を表示します。

<div class="surveyList" ng-repeat="survey in allSurveys | filter:global.search"> 
    <span class="checkbox" ng-click="survey.checked=!survey.checked" ng-class="{'checked':survey.checked}"></span> 
     <div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"> 
      <div class="col-xs-5 col-sm-2 col-md-3">{{survey.SurveyName}}</div> 
      <div class="col-sm-3 col-md-4 hidden-xs">{{survey.Date | date:'dd/mm/yyyy'}}</div> 
      ... 

はちょうどそれに応じてクリックし、[Setクラスにsurvey.checkedを設定します：あなたが行くここ

<div class="surveyList" ng-repeat="survey in allSurveys | filter:global.search"> 
         <span class="checkbox" ng-click="surveySelected=!surveySelected" ng-class="{'checked':surveySelected}"></span> 
         <div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"> 
          <div class="col-xs-5 col-sm-2 col-md-3">{{survey.SurveyName}}</div>... 

Answer 1

するlist.html修正

header.html

<div class="navbar-header col-lg-3 col-md-6 col-sm-3 col-xs-6" ng-show="surveySelected"> 
       <a class="glyphicon glyphicon-arrow-left col-xs-2" ng-click="" id="backButton"></a> 
       <span class="moduleTitle">Back</span> 
      </div> 

ng-class="{'checked':survey.checked}"

P.このように$ rootScopeを使用することは決してありません。 :)