ng-repeat要素にイベントを追加する

Question

私は非常に新しい角度です:)。 ng-repeatによって構築された特定の値を持つ単純なイベントの1つのフォーム要素を追加したいと思います。これは、HTMLがどのように見えるかです：

<div class="labels"> 
         <div class="checkbox-element" ng-repeat="suggestName in $ctrl.suggests" ng-click="$ctrl.toggleSelection(suggestName, 'suggestsSelection', this)"> 
          <label> 
           <input type="checkbox" name="suggestsSelection[]" 
             class="hidden" 
             value="{{suggestName}}"            
             ><span></span>{{suggestName}} 
          </label>                 
         </div> 
         <div class="optionary hidden"> 
          <br> 
          <div class="question__text">Any other?</div> 
          <label><input type="text" 
              ng-model="$ctrl.survey.suggest_other" 
              name="suggests_other1"></label><br>      
         </div> 
        </div> 

そして、コントローラコード：私は必要なもの

vm.survey = {}; 

     vm.suggests = ['quality', 'price', 'habbit', 'other']; 

     // selected 
     vm.survey.suggestsSelection = []; 

     // toggle selection for a given names 
     vm.toggleSelection = function toggleSelection(value, array, scope) { 

      var idx = vm.survey[array].indexOf(value); 

      // is currently selected 
      if (idx > -1) { 
      vm.survey[array].splice(idx, 1); 
      } 

      // is newly selected 
      else { 
      vm.survey[array].push(value); 
      } 
     }; 

は、クラス「optionary」とDIVから「隠された」クラスを切り替えますイベントを作成することです最後に作成されたチェックボックス（この場合は「その他」）をクリックしてください。他のチェックボックスをクリックしても、「オプション」のdivには影響しないはずです。

if(scope.$last){ 
       $(scope).closest('.optionary').toggleClass('hidden');     
      } 

または類似：

私のようないくつかの構成で試してみました。私は、トピックに近づくためにはどうすればいいのか分からない。あなたはNGリピートを見ることができるように

Answer 1

は特殊な性質を持っている：https://docs.angularjs.org/api/ng/directive/ngRepeatは

あなたが興味を持っている一つが$lastです。チェックボックスにng-changeを追加し、パラメータ$lastで関数を呼び出して、その関数がスコープ変数を設定します。 hiddenクラスがそれに頼ることができます。

このような何か：

<input type="checkbox" name="suggestsSelection[]" 
     class="hidden" 
     ng-change="showHidden($last)" 
     value="{{suggestName}}"> 

そして、あなたのコントローラで：

$scope.hidden = true; 
$scope.showHidden = function(isLast) { 
    if (isLast) $scope.hidden = false; 
    else $scope.hidden = true; 
} 

そして、あなたはあなたのdivにng-classを追加します。

<div class="optionary" ng-class="{'hidden': hidden}">...</div> 

Answer 2

あなたはNG-ショーを使用する必要がありますおよび制御変数を含む。見てみましょう。ここ

jsFiddleは：https://jsfiddle.net/U3pVM/24834/

<div ng-app class="labels" ng-controller="MyCtrl"> 
    <div class="checkbox-element" ng-repeat="suggestName in suggests" ng-click="toggleSelection(suggestName, suggestsSelection, this)"> 
     <label> 
      <input type="checkbox" ng-model="cbSuggest[$index]" name="suggestsSelection[]" class="hidden" value="{{suggestName}}"> 
      <span>{{suggestName}}</span> 
     </label> 
    </div> 
    <div class="optionary hidden" ng-show="showOther"> 
     <br> 
     <div class="question__text">Any other?</div> 
     <label><input type="text" ng-model="survey.suggest_other" name="suggests_other1"></label><br> 
    </div> 
</div> 


var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.survey = {}; 
    $scope.suggests = ['quality', 'price', 'habbit', 'other']; 
    $scope.cbSuggest = []; 
    $scope.showOther = true; 

    // selected 
    $scope.survey.suggestsSelection = []; 

    // toggle selection for a given names 
    $scope.toggleSelection = function(value, array, scope) { 
     var showOther = true; 
     angular.forEach($scope.cbSuggest, function(k,v){ 
      if(k) { 
       showOther = false; 
      } 
     }); 
     $scope.showOther = showOther; 
    }; 
}