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">कैंसिल<br>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. Но это не сработало.