Question

我的角度页面中有单选按钮组。以下是我的代码，

<span ng-repeat="radioButtonItem in radioButtonItem.Values">
    <label class="radio-inline">
        <input type="radio"
               name="radioButtonName"
               value="{{radioButtonItem.Id}}"
               ng-model="radioButtonItem.SelectedValues"
               ng-change="changeRadioButton()" />
        {{radioButtonItem.Value}} 
    </label>

</span>

 Ex :
      Radio button 1 : .Male .Female
      Radio button 2 : .ax .sy
      Radio button 3 : .c .v

当我选择第一组单选按钮说男性并选择第二组单选按钮时先说出ax 一个是取消选择（男性）。如何保留单选按钮组中的值？

Answer 1

因为所有群组的名称都相同。也可以动态生成它。

这是你如何做到的。我也附上了一个例子。

 <input type="radio"
        name="{{radioButtonItem.groupName}}"
        value="{{radioButtonItem.Id}}"
        ng-model="radioButtonItem.SelectedValues"
        ng-change="changeRadioButton()"/>

＆＃13;

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
    $scope.cell = {
        evaluator: "Guava2"
    };
    $scope.cell1 = {
        evaluator: "Apple1"
    };
    $scope.evaluators = [{
        name: "Guava1",
        groupName: "guava"
    }, {
        name: "Guava2",
        groupName: "guava"
    }];
    $scope.evaluators1 = [{
        name: "Apple1",
        groupName: "peachy"
    }, {
        name: "Peach2",
        groupName: "peachy"
    }];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body>
<div ng-app="myApp">
    <div ng-controller="myController">
        <div>Which one?</div>
        <label class="radio" ng-repeat="eval in evaluators">
            <input type="radio" ng-model="cell.evaluator" name="{{eval.groupName}}" value="{{eval.name}}">{{eval.name}}
        </label>
            <hr />
        <div>You picked: {{cell.evaluator}}</div>
        
        <br/>
        
        <label class="radio" ng-repeat="eval in evaluators1">
            <input type="radio" ng-model="cell1.evaluator" name="{{eval.groupName}}" value="{{eval.name}}">{{eval.name}}
        </label>
        <div>You picked: {{cell1.evaluator}}</div>

    </div>
</div>
</body>
</html>

＆＃13;

单选按钮组中的选定值未保留在angularjs中

1 个答案: