我搜索并尝试了许多ng-xxxx类型的选项,但没有找到合适的。 当选中单选按钮时,我只想在控制器中调用一些函数。
所以它可能类似于以下代码..(当然,下面的代码不起作用)
<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>
有没有实现我想要的方式?
我搜索并尝试了许多ng-xxxx类型的选项,但没有找到合适的。 当选中单选按钮时,我只想在控制器中调用一些函数。
所以它可能类似于以下代码..(当然,下面的代码不起作用)
<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>
有没有实现我想要的方式?
至少有两种不同的方法可以在单选按钮选择时调用函数:
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/
了解您的使用情况将有助于提出适当的解决方案。
如果触发源不是点击,应该使用 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>
在更新的Angular版本中(我使用的是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>
针对动态数值!
<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);
};
我更喜欢在ng-if中使用ng-value,[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">
Object.defineProperty
将value
设置为控制器作用域中的getter/setter属性,然后每次更改值属性都会触发在setter中指定的函数:<input type="radio" ng-model="value" value="one"/>
<input type="radio" ng-model="value" value="two"/>
<input type="radio" ng-model="value" value="three"/>
var _value = null;
Object.defineProperty($scope, 'value', {
get: function () {
return _value;
},
set: function (value) {
_value = value;
someFunction();
}
});
<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>
ng-change
的具体情况 ... 但是你可以通过使用方法2来避免多个事件处理程序(例如在每个input
上都有一个ng-change = ...
):每个输入都需要一个ng-model
,然后你只需要一个单独的watch
监听变化即可... - dsdsdsdsdvalue
参数不会自动设置为任何值。除此之外,这是一个有用的解决方案。 - Tony Brasunas