在ng-repeat元素上添加事件

Question

我對angular :)很新穎。我想添加一個簡單的事件，一個具有特定值的表單元素，由ng-repeat構建。這是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');     
      } 

或相似。我不知道應該如何解決這個問題。

Answer 1

正如你所看到的NG-重複有特殊的性質：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; 
} 

然後你添加ng-class到您的DIV：

<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; 
    }; 
}