AngularJS:与范围和单选按钮交互混淆

时间:2014-02-25 22:47:00

标签: angularjs

为什么$scope在这个非常简单的例子中不会改变状态?当我选择每个单选按钮时,我希望看到一个控制台消息,显示示波器的值已经改变。这看起来很简单,不确定我错过了什么。那就是说,我对角度很新,所以如果我做出我不应该做的假设,请纠正我。

HTML:

<div ng-app="demo" ng-controller="SampleCtrl">
  <span>Group by:</span>
  <label><input type="radio" name="groupby" ng-model="groupby" value="1"/>Option 1</label>
  <label><input type="radio" name="groupby" ng-model="groupby" value="2"/>Option 2</label>
</div>

JS:

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

app.controller('SampleCtrl', function($scope) {
  $scope.groupby = 2;

  $scope.$watch($scope.groupby, function () {
    console.log($scope.groupby);
  });
});

小提琴:http://jsfiddle.net/BLSully/WL7as/

2 个答案:

答案 0 :(得分:3)

代码应该是

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

app.controller('SampleCtrl', function($scope) {
    $scope.groupby = 2;

    $scope.$watch('groupby', function () {
        console.log($scope.groupby);
      });
});

或者,在$watch表达式中,您可以使用函数而不是名称

$scope.$watch(function () { return $scope.groupby }, function () {
    ...
});

使用函数具有优势。例如,您可以观察复杂的表达式,而不仅仅是变量。

答案 1 :(得分:2)

$watch通常设置在scope属性的 name 上。所以,我希望看到类似的东西:

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

app.controller('SampleCtrl', function($scope) {
  $scope.groupby = 2;

  $scope.$watch('groupby', function () {
    console.log($scope.groupby);
  });
});

这是updated fiddle