AngularJS, ng-Wiederholung im Radio und $ scope.watch

Question

Ich benutze dieses Beispiel: um meine Radio-Buttons zu erstellen.

ich in der Lage sein möchte $ scope.watch auf den Radio-Buttons zu verwenden, aber ich bin zu verwenden, nicht in der Lage:

$scope.watch('selected', ... 

Was soll ich zuweisen können .watch erkennen Wann immer ein Benutzer auf ein Optionsfeld klickt?

Answer 1

Der tatsächliche Fehler war $scope.watch sollte $scope.$watch sein, Wächter über eine Variable des Umfangs zu haben, wäre nicht die gute Idee. Statt Wächter über ng-model zu setzen, würde ich vorschlagen, dass Sie ng-change verwenden, das nur feuert, wenn Radiobutton ng-model Wert geändert wird.

<label ng-repeat="option in options"> 
    <input type="radio" ng-change="test()" ng-model="$parent.selected" ng-value="option" />{{option}} 
</label> 

---

Und dann verwenden Sie nicht von $parent Notation loszuwerden für Außenumfang ng-repeat Zugriff Sie können wechseln controllerAs Muster zu verwenden, und dann ng-Controller-Richtlinie ändern alias der Controller zu verwenden. dass auch die Controller-Implementierung ändern, binden Wert this (Kontext) statt $scope

Markup

<div ng-controller="mainController as vm"> 
    <label ng-repeat="option in vm.options"> 
     <input type="radio" ng-change="vm.test()" ng-model="vm.selected" ng-value="option" />{{option}} 
    </label> 
</div> 

-Controller

appModule.controller('mainController', function($scope) { 
    var vm = this; 
    vm.selected = 'red'; 
    vm.options = ['red', 'blue', 'yellow', 'green']; 
    vm.test = function() { 
    alert('Changed'); 
    } 
}); 

Forked Plunkr

Answer 2

I ag Ree mit @ PankajParker, aber es ist auch von Ihrem Controller möglich. Sie haben nur die Syntax falsch, es $scope.$watch ist, nicht $scope.watch

Werfen Sie einen Blick auf diese: https://jsfiddle.net/qnw8ogrk/32/

Answer 3

Fiddle: https://jsfiddle.net/stevenng/qnw8ogrk/33/

Markup

<div ng-app="app"> 
    <div ng-controller="mainController"> 
     <label ng-repeat="option in options"> 
      <input type="radio" ng-change="picked(this)" ng-model="$parent.selected" ng-value="option"/>{{option}} 
     </label> 
    </div> 
</div> 

Script

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

appModule.controller('mainController', function($scope) { 

    $scope.selected = 'red'; 
    $scope.options = ['red', 'blue', 'yellow', 'green']; 
     $scope.picked = function($scope) { 
     alert('you picked: ' + $scope.selected); 
    } 
});