AngularJS-选择单选按钮时触发

我搜索和尝试了许多 ng-xxxx 类型的选项，但没有找到一个. 。 当单选按钮被选中时，我只想调用控制器中的某个函数。

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

<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>

Is there any way to achieve what I want?

241937 次浏览
小开

如果触发器源不是由 click 产生的，则应使用 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>
小开

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

1)使用 ng-change指令:

<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>

然后，在一个控制器中:

$scope.newValue = function(value) {
console.log(value);
}

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

2)观察模型的变化。这并不需要在输入层面上有什么特别的要求:

<input type="radio" ng-model="value" value="foo">

但在一个控制器中，人们会有:

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

还有 jsFiddle: http://jsfiddle.net/vDTRp/2/

更多地了解您的用例将有助于提出一个适当的解决方案。

小开

Another approach is using Object.defineProperty to set valueas a getter setter property in the controller scope, then each change on the value property will trigger a function specified in the setter:

HTML 文件:

<input type="radio" ng-model="value" value="one"/>
<input type="radio" ng-model="value" value="two"/>
<input type="radio" ng-model="value" value="three"/>

Javascript 文件:

var _value = null;
Object.defineProperty($scope, 'value', {
get: function () {
return _value;
},
set: function (value) {
_value = value;
someFunction();
}
});

有关实现，请参见此 混蛋

小开

在新版本的 angle 中(我使用的是1.3) ，你基本上可以设置模型、值和双重绑定来完成所有的工作，这个例子就像一个魔咒:

angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {
$scope.color = {
name: 'blue'
};
}]);
<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>

小开

我更喜欢对 ngif 使用 n- 值, [ ng-value ]将处理触发器更改

<input type="radio"  name="isStudent" ng-model="isStudent" ng-value="true" />


//to show and hide input by removing it from the DOM, that's make me secure from malicious data


<input type="text" ng-if="isStudent"  name="textForStudent" ng-model="job">
小开

为了动态的价值！

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

在控制器中

$scope.changeTipoAcesso = function(value) {
console.log(value);
};
小开 
 <form name="myForm" ng-submit="submitForm()">
<label data-ng-repeat="i in [1,2,3]"><input type="radio" name="test" ng-model="$parent.radioValue" value="\{\{i}}"/>\{\{i}}</label>
<div>currently selected: \{\{radioValue}}</div>
<button type="submit">Submit</button>
</form>

提交答案