如何在Angularjs中把选定的无线电传递给控制器

How to pass selected radio to controller in Angularjs

本文关键字：无线电 控制器 Angularjs      更新时间：2023-09-26

如何将选中的单选项console.log() ?我还尝试通过添加checked="checked"来选择默认值，但它不起作用。

<body ng-app="app">
  <div class="container"  ng-controller="radioController">
    <label for="redRadio">Red:</label>
    <input id="redRadio" type="radio" ng-model="colorValue" value="red" /><br />
    <label for="greenRadio">Green:</label>
    <input checked="checked" id="greenRadio" type="radio" ng-model="colorValue" value="green" /><br />
    <label for="blueRadio">Blue:</label>
    <input id="blueRadio" type="radio" ng-model="colorValue" value="blue" /><br />
    <br />
    <strong>Selected color:</strong> {{colorValue}}<br />
  </div>
<script>
angular.module("app", [])
  .controller("radioController", function ($scope)
  {
   });
</script>
</body>

您可以在您的单选按钮上添加ng-change功能，并将ng-model值作为参数传递。

标记 

<div ng-controller="radioController">
      <input type="radio" ng-model="color.name" value="red" ng-change="changedValue(color.name)">  Red <br/>
      <input type="radio" ng-model="color.name" value="green" ng-change="changedValue(color.name)"> Green <br/>
      <input type="radio" ng-model="color.name" value="blue" ng-change="changedValue(color.name)"> Blue <br/>
</div>

演示Plunkr

为了减少html，你可以使用ng-repeat指令，为你呈现html，只有你应该维护一个数组，其中将有各种颜色。

标记

<div ng-repeat="color in colors">
  <input name="radio" type="radio" ng-model="color.name" value="red" ng-change="changedValue(color.name)"> {{color.name}}
  <br/>
</div>


$scope.colors = [{
  name: 'Green',
  value: 'green'
}, {
  name: 'Red',
  value: 'red'
}, {
  name: 'Blue',
  value: 'blue'
}];

更新Plunkr 

<script>
angular.module("app", [
]).controller("radioController", function ($scope, $log) {
   $scope.$watch('colorValue', function(colorValue){
       $log.info(colorValue);
   });
});
</script>
相关文章：