为了让听众保持最低限度,我在表单上使用了一个change
监听器。但是,只有在我更改第一列/一组单选按钮时才会触发该事件。它没有触发其余的单选按钮列。
为什么这样,如何只为所有单选按钮使用一个更改侦听器?
<div class="filter-column" data-ng-init="init()">
<form name="ppvSelectionForm">
<div class="filter-title">Region</div>
<div class="bottom-line"></div>
<div class="overflow-container">
<input type="radio" value="all" name="regionRadio" checked>All
<div ng-repeat="choice in regions| orderBy: 'description'">
<input type="radio" value="{{choice.name}}" name="regionRadio">
{{choice.description}}
</div>
</div>
</div>
<div class="filter-column">
<div class="filter-title">Market</div>
<div class="bottom-line"></div>
<div class="overflow-container">
<div ng-if="markets.length >= 1">
<input type="radio" value="all" name="marketRadio" checked>All
</div>
<div ng-repeat="choice in markets| orderBy: 'name'">
<input type="radio" value="{{choice.name}}" name="marketRadio">
{{choice.name}}
</div>
</div>
</div>
<div class="filter-column">
<div class="filter-title">Dealer</div>
<div class="bottom-line"></div>
<div class="overflow-container">
<div ng-if="dealers.length >= 1">
<input type="radio" value="all" name="dealerRadio" checked>All
</div>
<div ng-repeat="choice in dealers| orderBy: 'name'">
<input type="radio" value="{{choice.name}}" name="dealerRadio">
{{choice.name}}
</div>
</div>
</div>
$scope.init = function() {
formEl = document.querySelector('form[name="ppvSelectionForm"]');
formEl.addEventListener("change", radioMap);
}
function radioMap(el) {
console.log(el.target.name)
switch(el.target.name) {
case 'regionRadio':
regionsOrMarkets(el.target.value);
break;
case 'marketRadio':
populateDealers(el.target.value);
break;
}
}
答案 0 :(得分:1)