角度单选按钮不在手表上射击

时间:2016-11-15 11:26:27

标签: angularjs

我在region上有一只手表但是当我点击单选按钮时它没有触发。

我做错了什么或是因为单选按钮只检测角度变化一次?不管怎么说,不使用表格?

  <div class="filter-column">
    <div class="filter-title">Region</div>
    <div class="bottom-line"></div>
    <div class="overflow-container">
      <div ng-repeat="choice in regions| orderBy: 'description'">
        <input type="radio"
          value="{{choice.name}}"
          name="regionRadio"
          ng-model="region">
        {{choice.description}}
      </div>
    </div>
  </div>
    $scope.$watchCollection(watchRMDapisPopulate,
    populateRMDfiltersView);

    function watchRMDapisPopulate() {
        return regionMarketDealerSrv.orgFilterData;
      }

      function populateRMDfiltersView(newValue, oldValue) {
        if (newValue) {
          $scope.regions = newValue.regions;
        }
      }



      $scope.$watch('region', radioButtonRegion);

      function radioButtonRegion(regionName) {
        console.log(regionName)
        if (regionName === 'All') {
          regionMarketDealerSrv.populateRegions();
        } else {
          regionMarketDealerSrv.populateMarkets(regionName);
        } 
      }

1 个答案:

答案 0 :(得分:2)

使用ng-model="region"时手表无法正确接收更改,因为您使用的是原始值。当您更改值时,您将获得新的引用。您可以使用对象的属性作为模型,使用$watch

var app = angular.module('app', [])

app.controller('MyController', function($scope) {
  $scope.regions = [{
    name: 'a',
    description: 'region A'
  }, {
    name: 'b',
    description: 'region B'
  }];

  $scope.selected = {
    region: 'a'
  };

  $scope.$watch('selected.region', radioButtonRegion);

  function radioButtonRegion(newVal, oldVal) {
    if (newVal !== oldVal) {
      console.log(newVal, oldVal)
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyController">
  <div>Region</div>
  <div ng-repeat="choice in regions| orderBy: 'description'">
    <input type="radio" value="{{choice.name}}" name="regionRadio" ng-model="selected.region">{{choice.description}}
  </div>
</div>