javascript - 在 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>

Controller 代码:

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

我需要的是创建一个事件，在单击最后创建的复选框(在本例中为“其他”)后，该事件将在具有“可选”类的 div 中切换“隐藏”类。单击其他复选框不应影响“可选”div。

我尝试了一些配置，例如:

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

或类似的。我不知道应该用什么方式来处理这个话题。

Answer 1

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

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