Question

我试图获取所选的收音机并使用角度设置它：

html

<span class="form-group" ng-controller="FiltreFicheController as ffCtrl">
    <input type="radio" name="sur" ng-model="sur" value="1" ng-change="ffCtrl.selectRadio(1)" checked="ffCtrl.isSelected(1)">
<input type="radio" name="sur" ng-model="sur" value="4" ng-change="ffCtrl.selectRadio(4)" checked="ffCtrl.isSelected(4)">
<input type="radio" name="sur" ng-model="sur" value="6" ng-change="ffCtrl.selectRadio(6)" checked="ffCtrl.isSelected(6)">
<input type="radio" name="sur" ng-model="sur" value="8" ng-change="ffCtrl.selectRadio(8)" checked="ffCtrl.isSelected(8)">
<input type="radio" name="sur" ng-model="sur" value="12" ng-change="ffCtrl.selectRadio(12)" checked="ffCtrl.isSelected(12)">
</span>

JS

app.controller('FiltreFicheController', function($scope, $location){
    this.radio = 1;

    this.selectRadio = function(numRadio){
        this.radio = numRadio;
        alert('1');
    }

    this.isSelected = function(numRadio){
        return this.radio === numRadio;
    }
});

继续这样做，我没有检查第一台收音机。请问有什么不对？我使用chrome的调试器没有收到任何错误。

请问如何使这项工作？

Answer 1

为什么不喜欢这样：

<span class="form-group" ng-controller="FiltreFicheController">
    <input type="radio" name="sur" ng-model="sur" value="1" ng-change="selectRadio(1)" checked="isSelected(1)">
    <input type="radio" name="sur" ng-model="sur" value="4" ng-change="selectRadio(4)" checked="isSelected(4)">
    <input type="radio" name="sur" ng-model="sur" value="6" ng-change="selectRadio(6)" checked="isSelected(6)">
    <input type="radio" name="sur" ng-model="sur" value="8" ng-change="selectRadio(8)" checked="isSelected(8)">
    <input type="radio" name="sur" ng-model="sur" value="12" ng-change="selectRadio(12)" checked="isSelected(12)">
</span>

然后：

app.controller('FiltreFicheController', function($scope, $location){
    var radio = 1;

    $scope.selectRadio = function(numRadio){
        radio = numRadio;
        alert('1');
    }

    $scope.isSelected = function(numRadio){
        return radio === numRadio ? 'checked' : '';
    }
});

Answer 2

你了解AngularJS的ng-model principle吗？

我创建了JSFiddle。单击某个值并设置ng-model时，您已经拥有所选的值！您甚至可以通过ng-model设置不同的单选按钮。

HTML：

<div ng-controller="MyCtrl">
  <input type="radio" name="sur_0" ng-model="selected" value="1"> Value 1
  <input type="radio" name="sur_1" ng-model="selected" value="4"> Value 4
  <input type="radio" name="sur_2" ng-model="selected" value="6"> Value 6
  <input type="radio" name="sur_3" ng-model="selected" value="8"> Value 8
  <input type="radio" name="sur_4" ng-model="selected" value="12"> Value 12 <br>
  <span>The selected value: {{selected}}</span>

JS：

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

function MyCtrl($scope) {
     $scope.selected;   
}

编辑：我不确定你想要什么，但现在你可以alert()你想要的东西：

if($scope.selected === '4') alert($scope.selected);

Answer 3

http://jsbin.com/kemid/1/edit?html,js,output

<span class="form-group" ng-controller="FiltreFicheController as ffCtrl">
  <input type="radio" name="sur" ng-model="sur" value="1" ng-change="ffCtrl.selectRadio(1)" checked="ffCtrl.isSelected(1)">
<input type="radio" name="sur" ng-model="sur" value="4" ng-change="ffCtrl.selectRadio(4)" checked="ffCtrl.isSelected(4)">
  <input type="radio" name="sur" ng-model="sur" value="6" ng-change="ffCtrl.selectRadio(6)" checked="ffCtrl.isSelected(6)">
<input type="radio" name="sur" ng-model="sur" value="8" ng-change="ffCtrl.selectRadio(8)" checked="ffCtrl.isSelected(8)">
  <input type="radio" name="sur" ng-model="sur" value="12" ng-change="ffCtrl.selectRadio(12)" checked="ffCtrl.isSelected(12)">
</span>

JS

app.controller('FiltreFicheController', function($scope, $location){
    this.radio = 1;

    this.selectRadio = function(numRadio){
        this.radio = numRadio;
        alert(numRadio);
    };

    this.isSelected = function(numRadio){
        return this.radio === numRadio;
    };
});

使用角度检查μ/取消选中无线电

3 个答案: