Добавление события на повторяющийся элемент

Question

Добавление события на повторяющийся элемент

0

Я очень новичок в угловой :). Я хотел бы добавить простой элемент события из одной формы с определенным значением, созданным 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);
            }
        };

Мне нужно создать событие, которое переключит класс "hidden" из div с классом "optionary" после щелчка на последнем созданном флажке ("в этом случае"). Нажатие на другие флажки не должно влиять на "опциональный" div.

Я пробовал с некоторыми настройками вроде:

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

или похожие. Я не знаю, каким должен быть подход к этой теме.

Hub26 17 май 2016, в 00:15

Источник

Теги:

javascript

jquery

angularjs

2 ответа

Ещё вопросы

John Smith · Answer 1 · 2016-05-16T20-15-00.000Z

Как вы видите, ng-repeat имеет специальные свойства: 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>

Кажется, это хорошее решение, но после применения ng-repeat выбрасывает '{{offerName}}' вместо меток флажков, как и раньше. Как это могло пойти не так? :)
Вы не должны устанавливать свойство value таким образом, вместо этого вы должны использовать ng-model="suggestName" . Редактировать: если вы хотите установить с этим значение true, используйте ng-true-value . Вы можете узнать больше об этом здесь: docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
Это не работает ... После этого изменения параметры видны, но при щелчке по ним их значение изменяется на true / false.
Не могли бы вы показать код, как вы его использовали?

Felippe Duarte · Answer 2 · 2016-05-16T19-05-00.000Z

Вам нужно использовать 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;
    };
}