在表单上更改事件 - 仅在第一组单选按钮上触发,而不是在其余按钮上触发

时间:2016-11-02 02:13:39

标签: javascript angularjs

为了让听众保持最低限度,我在表单上使用了一个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;
    }
  }

1 个答案:

答案 0 :(得分:1)

我认为这似乎是所提供的代码片段的罪魁祸首。额外的结束div正在关闭Controller的范围。

{{1}}

如果这有帮助,请告诉我。在BottomNavigationView

上试了一下