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