Javascript 在ng repeat元素上添加事件

我是个新手：）。我想添加一个简单的EventOne表单元素，该元素具有一个特定的值，由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>

我需要的是创建一个事件，在单击上次创建的复选框（本例中为“其他”）后，该事件将通过类“optional”从div切换类“hidden”。单击其他复选框不应影响“可选”分区

我尝试了一些配置，如：

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

---

或类似的。我不知道；I don’’我不知道该如何处理这个话题。

正如您所见，ng repeat具有特殊的属性：

您感兴趣的是

$last

。您可以将

ng change

添加到复选框中，使用参数

$last

调用函数，该函数将设置范围变量。

hidden

类可以依赖于此

大概是这样的：

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

然后将

ng class

添加到div中：

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

。。。

如您所见，ng repeat具有特殊属性：

您感兴趣的是

$last

。您可以将

ng change

添加到复选框中，使用参数

$last

调用函数，该函数将设置范围变量。

hidden

类可以依赖于此

大概是这样的：

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

然后将

ng class

添加到div中：

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

。。。

您需要使用ng show和一个控制变量。看一看

请点击此处：

{{suggestName}}


还有别的吗？


var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.survey={}；
$scope.suggestions=[‘质量’、‘价格’、‘habbit’、‘其他’]；
$scope.cbSuggest=[]；
$scope.showOther=true；
//精选
$scope.survey.suggestSelection=[]；
//切换给定名称的选择
$scope.toggleSelection=函数（值、数组、范围）{
var showOther=真；
角度.forEach（$scope.cbs建议，函数（k，v）{
如果（k）{
showOther=假；
}
});
$scope.showorth=showorth；
};
}

您需要使用ng show和一个控制变量。看一看

请点击此处：

{{suggestName}}


还有别的吗？


var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.survey={}；
$scope.suggestions=[‘质量’、‘价格’、‘habbit’、‘其他’]；
$scope.cbSuggest=[]；
$scope.showOther=true；
//精选
$scope.survey.suggestSelection=[]；
//切换给定名称的选择
$scope.toggleSelection=函数（值、数组、范围）{
var showOther=真；
角度.forEach（$scope.cbs建议，函数（k，v）{
如果（k）{
showOther=假；
}
});
$scope.showorth=showorth；
};
}

似乎是一个很好的解决方案，但在应用ng repeat之后，它抛出了“{suggestName}}”，而不是像以前一样的复选框标签。怎么会出错呢？：）您不应该这样设置

值

属性，而应该使用

ng model=“suggestName”

。编辑：如果要用它设置真值，请使用

ng真值

。你可以在这里读到更多关于它的信息：它不起作用。。。更改后，选项可见，但单击它们会将其值更改为true/false。这似乎是一个很好的解决方案，但在应用ng repeat后，会抛出“{suggestName}}”，而不是复选框标签，如前所述。怎么会出错呢？：）您不应该这样设置

值

属性，而应该使用

ng model=“suggestName”

。编辑：如果要用它设置真值，请使用

ng真值

。你可以在这里读到更多关于它的信息：它不起作用。。。更改后，选项可见，但单击它们会将其值更改为true/false。

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