单选按钮值更改在 AngularJS 中不起作用

Radio button Value change not working in AngularJS

本文关键字：AngularJS 不起作用 单选按钮      更新时间：2023-09-26
myApp.controller("MyCtrl",function ($scope) {
    $scope.value1= '0';
    $scope.$watch('value1', function(value) {
    alert(value);
     });
 });

JS代码：

var myApp = angular.module('myApp',[]);    
function MyCtrl($scope) {
    $scope.value1= '0';
    $scope.$watch('value1', function(value) {
       alert(value);
    });
}

网页代码：

<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
  <input name="asdf" ng-model="value1" value="{{i}}" type="radio">
</span>    
<hr> 
{{value1}}
</div>

仅在加载时显示警报。之后value1仅显示初始值，即0。

演示

这实际上是范围的问题。我已经在 http://jsfiddle.net/ucf02Lxz/2/修改了这里的例子。看一看。基本上，您需要使用对象来修改父范围内的值。

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
    // an object to prevent problem
    $scope.data = {};
    $scope.data.value1 = '0';
    $scope.$watch('data.value1', function(value) {
       alert(value);
    });
})
<div ng-controller="MyCtrl">
    <span ng-repeat="i in [0, 1, 2]">
        <input name="asdf" ng-model="data.value1" ng-value="i" type="radio" />
    </span>    
    <hr /> 
    {{data.value1}}
</div>

阅读更多内容 https://github.com/angular/angular.js/wiki/Understanding-Scopes

相关文章：