AngularJS - 选择单选按钮时触发答案

【问题标题】：AngularJS - Trigger when radio button is selectedAngularJS - 选择单选按钮时触发
【发布时间】：2012-10-16 03:39:00
【问题描述】：

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

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

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

有什么方法可以实现我想要的吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

对于动态值！

<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-click 而不是 ng-change 时，它对我有用。另外，这里不使用 ng-model。

【解决方案3】：

我更喜欢将 ng-value 与 ng-if 一起使用， [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">

【讨论】：

【解决方案4】：

在较新版本的 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>

【讨论】：

【解决方案5】：

另一种方法是使用Object.defineProperty将value设置为控制器范围内的getter setter属性，然后对value属性的每次更改都会触发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();
  }
});

请参阅此plunker 以了解实施情况

【讨论】：

【解决方案6】：

如果触发源不是来自点击，则应使用 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>

【讨论】：

这仅适用于点击。如果用户使用键盘设置单选按钮怎么办？

【解决方案7】：

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

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/

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

【讨论】：

我正在使用 AngularJS Bootstrap 绑定。 Watch 不起作用，但 ng-change 处理程序可以。
有没有办法为广播组使用单个 ng-change 指令？
value 这个词让人很困惑。
@jEremyB .. 我不知道单个 ng-change 具体...但是您可以通过使用方法 2：每个输入都需要一个 ng-model，然后你有一个 watch 监听变化...
仅供参考 - ng-change 中的 value 参数不会自动设置为任何值。否则，有用的解决方案。