Question

我正在使用此示例：https://jsfiddle.net/qnw8ogrk/1/来创建我的单选按钮。

我希望能够在收音机按钮上使用$ scope.watch，但我无法使用：

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

我应该为.watch分配什么，以便能够在用户点击单选按钮时进行检测？

Answer 1

$scope.watch的实际错误应该是$scope.$watch观察范围变量的观察者不是好主意。而不是将观察者置于ng-model之上，我建议您使用ng-change，这只会在单选按钮ng-model值发生变化时触发。

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

然后不要使用删除$parent表示法访问ng-repeat的外部范围，您可以切换到使用controllerAs模式，然后更改ng-controller指令以使用{控制器{1}}这也将改变控制器实现，将值绑定到alias（上下文）而不是this

<强>标记

$scope

<强>控制器

<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>

Forked Plunkr

Answer 2

我同意@PankajParker，但也可以从你的控制器那里获得。您的语法错误，它是$scope.$watch，而不是$scope.watch

看看这个：https://jsfiddle.net/qnw8ogrk/32/

Answer 3

小提琴：https://jsfiddle.net/stevenng/qnw8ogrk/33/

<强>标记

<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>

<强>脚本

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);
    }
});

AngularJS，ng-repeat on radio和$ scope.watch

3 个答案: