角度無線電按鈕不會燒上手錶

Question

我有一塊手錶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); 
     } 
     } 

Answer 1

手錶是無法使用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>