Радиокнопка data-ng-model/data-ng-change не работает с data-ng-repeat

A]
Когда не используется с data-ng-repeat, переключатель data-ng-change работает правильно.

При смене выбранного радио вызывается функция updatedLanguageTrigger(languageSelected) , и значение регистрируется должным образом.
Это работающий код jsp:

<div spacing="${'mini'}">
    <div gridUnits="6"
                  cssClass="language-switcher-radio-button">
        <input type="radio"
               id="language-switcher-en_IN"
               name="language-switcher-radio"
               data-ng-swipe-input-tag="true"
               value="en_IN"
               data-ng-model="languageSelected"
               data-ng-change="updatedLanguageTrigger(languageSelected)"/>
        <label for="language-switcher-en_IN">
            <span class="centre-vertical-and-horizontal">English</span>
        </label>
    </div>
    <div gridUnits="6"
                  cssClass="language-switcher-radio-button"
                  position="last">
        <input type="radio"
               id="language-switcher-hi_IN"
               name="language-switcher-radio"
               value="hi_IN"
               data-ng-model="languageSelected"
               data-ng-change="updatedLanguageTrigger(languageSelected)"/>
        <label for="language-switcher-hi_IN">
            <span
            class="centre-vertical-and-horizontal">Hindi</span>
        </label>
    </div>
</div>

B]
Но при использовании с data-ng-repeat он работает только первые 2 раза.

(т. е. сначала работает выбор английского радио, затем работает выбор радио на хинди , но снова выбор английского радио, не работает, и все последующие изменения не работают).
Под работой я подразумеваю, что вызывается функция updatedLanguageTrigger(languageSelected), с правильным значением.

<div spacing="${'mini'}"
           data-ng-repeat="languageCode in auxLanguages"
           data-ng-if="$index % 2 == 0">
    <div gridUnits="6"
                  cssClass="language-switcher-radio-button"
                  data-ng-attr-position="$last ? 'last' : undefined">
        <input type="radio"
               id="language-switcher-{{auxLanguages[$index]}}"
               name="language-switcher-radio"
               value="{{auxLanguages[$index]}}"
               data-ng-model="languageSelected"
               data-ng-change="updatedLanguageTrigger(languageSelected)"/>
        <label for="language-switcher-{{auxLanguages[$index]}}">
            <span class="centre-vertical-and-horizontal">{{radioButtonTexts[$index]}}</span>
        </label>
    </div>
    <div gridUnits="6"
                  data-ng-if="($index + 1) < auxLanguages.length"
                  cssClass="language-switcher-radio-button"
                  position="last">
        <input type="radio"
               id="language-switcher-{{auxLanguages[$index + 1]}}"
               name="language-switcher-radio"
               value="{{auxLanguages[$index + 1]}}"
               data-ng-model="languageSelected"
               data-ng-change="updatedLanguageTrigger(languageSelected)"/>
        <label for="language-switcher-{{auxLanguages[$index + 1]}}">
            <span class="centre-vertical-and-horizontal">{{radioButtonTexts[$index + 1]}}</span>
        </label>
    </div>
</div>

Это HTML-код, сгенерированный в Firefox Inspector:

<div data-ng-if="$index % 2 == 0" data-ng-repeat="languageCode in auxLanguages" class="a-row a-spacing-mini ng-scope">
    <div data-ng-attr-position="$last ? 'last' : undefined" class="a-column a-span6 language-switcher-radio-button">
        <input type="radio" id="language-switcher-en_IN" name="language-switcher-radio" value="en_IN" data-ng-model="languageSelected" data-ng-change="updatedLanguageTrigger(languageSelected)" class="ng-valid ng-dirty">
        <label for="language-switcher-en_IN" class="">
            <span class="centre-vertical-and-horizontal ng-binding">English</span>
        </label>
    </div>
    <!-- ngIf: ($index + 1) < auxLanguages.length --><div data-ng-if="($index + 1) < auxLanguages.length" class="a-column a-span6 language-switcher-radio-button a-span-last ng-scope">
    <input type="radio" id="language-switcher-hi_IN" name="language-switcher-radio" value="hi_IN" data-ng-model="languageSelected" data-ng-change="updatedLanguageTrigger(languageSelected)" class="ng-valid ng-dirty">
    <label for="language-switcher-hi_IN">
        <span class="centre-vertical-and-horizontal ng-binding">कैंसिल&lt;br&gt;Hindi</span>
    </label>
    </div><!-- end ngIf: ($index + 1) < auxLanguages.length -->
</div>

Это функция AngularJS, на которую ссылаются в обоих случаях:

$scope.updatedLanguageTrigger = function(value) {
     console.log("Entering UpdatedLanguageTrigger()");
     console.log("Language switcher value" + value);
};

Что мне здесь не хватает?

Я пробовал следующее: https://stackoverflow.com/a/21603553/8855983. Но это не сработало.


person Kulkarni    schedule 06.07.2020    source источник


Ответы (1)


Вы используете одну и ту же ng-модель для всех ваших входных данных. Изменение data-ng-model и data-ng-change следующим образом должно работать.

    <input type="radio"
           id="language-switcher-{{auxLanguages[$index + 1]}}"
           name="language-switcher-radio"
           value="{{auxLanguages[$index + 1]}}"
           data-ng-model="languageCode.languageSelected"
           data-ng-change="updatedLanguageTrigger(languageCode.languageSelected)"/>
person NTP    schedule 07.07.2020
comment
Нужно ли мне изменить язык для отправки JSON, или languageCode.languageSelected — это новая переменная, созданная для области? - person Kulkarni; 08.07.2020