ng-change事件僅在ng-repeat內部觸發一次

Question

在我的表單中，我正在使用兩個單選按鈕，並希望檢查所選的值。 但這不能按預期工作。 我想確定單個收音機的選擇值，並在“結果”列中顯示“大/小”

<div ng-controller="CityCtrl">
  <table>
    <tr>
      <th>Name</th>
      <th>Big</th>
      <th>Small</th>
      <th>Result</th>
    </tr>
    <tr ng-repeat="city in cities">
      <td>{{ city.name }}</td>
      <td>
        <input type="radio" name="{{city.name}}-{{$index}}" ng-model="big" value="big_value" ng-change="check(city.name, big)">
      </td>
      <td>
        <input type="radio" name="{{city.name}}-{{$index}}" ng-model="small" value="small_value" ng-change="check(city.name, small)">
      </td>
      <td>***</td>
    </tr>
  </table>
</div>

控制器：

var myApp = angular.module('cityApp', []);

function CityCtrl($scope) {
  $scope.big = '';
  $scope.small = '';
  $scope.cities = [{
    id: 1,
    name: 'Tokyo'
  }, {
    id: 2,
    name: 'Guangzhou'
  }, {
    id: 3,
    name: 'Seoul'
  }];

  $scope.check = function(city, value) {
    console.log("City->" + city + " ::: Value->" + value);
  };
}

從其他答案中，我確實推斷出幾件事：

1. 了解JS中的原型繼承嗎？
2. ng-repeat創建影響ng-repeat內這些無線電的子范圍
3. 在收音機的ng-modal上使用$ parent

我確實玩過，但無法完成這項工作，我想我在這里犯了一些明顯的錯誤。

這是小提琴： http : //jsfiddle.net/mw2us37h/

注意：我沒有使用ng-value，而是傳遞了一個硬編碼的值。 更改為ng-click也不起作用

Answer 1

將其標記為重復，但是似乎解決方案是在angularjs中使用單選按鈕時使用ng-click而不是ng-change 。

這是對您的小提琴的有效修改： http : //jsfiddle.net/mw2us37h/1/

Answer 2

我不確定我了解您的嘗試。 我認為您希望在結果列中顯示單選按鈕值和/或單擊傳遞值的功能。

在結果列中顯示單選按鈕值
我將更改ngModel值，以便將其綁定到特定於城市的東西。 所以改變：

<input type="radio" name="{{city.name}}-{{$index}}" ng-model="big" value="big_value">

至：

<input type="radio" name="{{city.name}}-{{$index}}" ng-model="city.size" value="big_value">

和

<input type="radio" name="{{city.name}}-{{$index}}" ng-model="small" value="small_value">

至

<input type="radio" name="{{city.name}}-{{$index}}" ng-model="city.size" value="small_value">

因此，模型指向相同的變量city.size ，這是保存所選值的位置。 然后將結果列中的***更改為city.size請參見更改小提琴： http : //jsfiddle.net/u2kxuyr7/

在ngClick上獲取價值

您已經准備好使用ngChange，為簡單起見，我會做些不同的事情。 更改：

ng-change="check(city.name, whatEverValue)"

到：ng-change =“ check（city）”

檢查功能如下所示：

  $scope.check = function(city) {
    console.log("City->" + city.name + " ::: Value->" + city.size);
  };

請參閱小提琴： http : //jsfiddle.net/Lmszxj8s/
然后，每次更改都會觸發ngChange。