AngularJS - 选择单选按钮时触发

Mom*_*ntH 114 angularjs

我搜索并尝试了许多ng-xxxx类型的选项,但找不到那个..我只想在选择单选按钮时调用控制器中的某些功能.

所以它可能类似于以下..(当然,下面的代码不起作用)

<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>
Run Code Online (Sandbox Code Playgroud)

有没有办法实现我想要的?

pko*_*rce 228

在单选按钮选择上至少有两种不同的方法来调用函数:

1)使用ng-change指令:

<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
Run Code Online (Sandbox Code Playgroud)

然后,在控制器中:

$scope.newValue = function(value) {
     console.log(value);
}
Run Code Online (Sandbox Code Playgroud)

这是jsFiddle:http://jsfiddle.net/ZPcSe/5/

2)观察模型的变化.这不需要输入级别的任何特殊内容:

<input type="radio" ng-model="value" value="foo">
Run Code Online (Sandbox Code Playgroud)

但在控制器中,人们会:

$scope.$watch('value', function(value) {
       console.log(value);
 });
Run Code Online (Sandbox Code Playgroud)

和jsFiddle:http://jsfiddle.net/vDTRp/2/

了解有关您的用例的更多信息将有助于提出适当的解决方案.

  • 有没有办法为广播组使用单个ng-change指令? (44认同)
  • "价值"这个词令人困惑. (20认同)
  • 我正在使用AngularJS Bootstrap绑定.Watch不起作用,但ng-change处理程序可以. (6认同)

max*_*sam 18

如果触发源不是来自点击,则应使用ngChange而不是ngClick.

以下是你想要的吗?在你的情况下究竟什么不起作用?

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

function MyCtrl($scope) {
    $scope.value = "none" ;
    $scope.isChecked = false;
    $scope.checkStuff = function () {
        $scope.isChecked = !$scope.isChecked;
    }
}


<div ng-controller="MyCtrl">
    <input type="radio" ng-model="value" value="one" ng-change="checkStuff()" />
    <span> {{value}} isCheck:{{isChecked}} </span>
</div>   
Run Code Online (Sandbox Code Playgroud)

  • 这仅适用于点击.如果用户使用键盘设置单选按钮怎么办? (4认同)

jac*_*per 8

在更新版本的角度(我使用1.3)你基本上可以设置模型和值和双重绑定完成所有工作这个例子像魅力:

angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {
  $scope.color = {
    name: 'blue'
  };
}]);
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<html>
<body ng-app="radioExample">
<form name="myForm" ng-controller="ExampleController">
  <input type="radio" ng-model="color.name" value="red">  Red <br/>
  <input type="radio" ng-model="color.name" value="green"> Green <br/>
  <input type="radio" ng-model="color.name" value="blue"> Blue <br/>
  <tt>color = {{color.name}}</tt><br/>
 </form>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)


小智 6

对于动态值!

<div class="col-md-4" ng-repeat="(k, v) in tiposAcesso">
    <label class="control-label">
        <input type="radio" name="tipoAcesso" ng-model="userLogin.tipoAcesso" value="{{k}}" ng-change="changeTipoAcesso(k)" />              
        <span ng-bind="v"></span>
    </label>
</div>
Run Code Online (Sandbox Code Playgroud)

在控制器中

$scope.changeTipoAcesso = function(value) {
    console.log(value);
};
Run Code Online (Sandbox Code Playgroud)