Angularjs僅在第一次選擇輸入無線電時觸發ng-change

Question

我用angularjs做了一個簡單的例子。 此示例包含三個無線電輸入，每個輸入都必須在更改時調用函數（ng-change => console.log）。 不幸的是，該功能僅在第一次選擇任何無線電輸入時觸發。

HTML：

<div ng-app="myApp" ng-controller="radioGroupController">
    <div ng-repeat="value in values">{{value}}
        <input type="radio" name="name" ng-model="val" value="{{value}}" ng-change="logChange(val)" />
        <hr/>
    </div>
</div>

JS：

angular.module('myApp', [])
    .controller('radioGroupController', ['$scope', function ($scope) {
    $scope.values = ['Option1', 'Option2', 'Option3'];
    $scope.logChange = function (newValue) {
        console.log('Changed to ' + newValue);
    };
}]);

我做錯了什么或這是預期的beheaviour？

編輯： 小提琴

Answer 1

幾個問題/變化： -

1-將value={{value}}更改為ng-value="value"因為ng-value - 將給定的表達式綁定到input [select]或input [radio]的值，以便在選擇元素時，該元素的ngModel設置為綁定值。

2-您需要在父作用域上的屬性上設置所選值，您有ng-repeat，並且您確實設置了子作用域的值，因此每個無線電都有自己的子作用域，其值永遠不會改變，所以ng-change是沒有觸發。

3-雖然logChange范圍已經擁有它，但您不需要傳遞模型值。

嘗試：-

在您的控制器中添加： -

  $scope.selected = {};

和視圖將模型設置為控制器范圍的selected屬性上的屬性，而不是ng-repeated子范圍的val屬性： -

 <input type="radio" name="name" ng-model="selected.val"
                  ng-value="value" ng-change="logChange()" />

Plnkr

Answer 2

您可以將ng-change為ng-click ，然后每次實際單擊按鈕時都會觸發。

這是一個JSFiddle 。

根據您想要實現的目標，請考慮使用$ watch或ng-model 。

如果將ng-model綁定到“值”或其他任何值，您可以檢查它具有哪個值並使用它。 Angulars的優勢正是這種雙向數據綁定而不做任何事情。 無需調用函數來傳遞參數。