Question

这是我写的AngularJS。

<script type="text/javascript">
    var app = angular.module("App1", []);
    app.controller("ctrl1", function ($scope, $filter) {
        $scope.GenderChoice = ["Male","Female"];
    });
</script>

以下代码可行。＆＃34;性别＆＃34;更改单选按钮时更改值。

<input id="MaleOption" name="oo" type="radio" ng-model="Gender" value="{{GenderChoice[0]}}" />
    <input id="FemaleOption" name="oo" type="radio" ng-model="Gender" value="{{GenderChoice[1]}}" />

我想用单选按钮使用ng-repeat。以下代码不起作用。当我点击更改单选按钮时，＆＃34;性别＆＃34;没有回应。实际上，＆＃34;性别＆＃34;永远不会显示价值。

<input ng-repeat="x in GenderChoice" id="{{x}}Option" name="oo" type="radio" ng-model="Gender" value="{{x}}" />

以下代码也不起作用。

<input ng-repeat="x in GenderChoice" id="{{x}}Option" name="oo" type="radio" ng-model="Gender" value="{{GenderChoice[$index]}}" />

这些代码有什么问题。感谢提前。

Answer 1

ng-repeat为每次迭代创建一个新范围。由于JavaScript Prototype Inheritance affects Angular的方式，以及绑定到基元而不是对象的事实，实际上有两个单独的Gender属性，并且单选按钮没有互连。

解决此问题的首选方法是绑定到对象上的属性（“始终在绑定中使用点”规则），这将自动为两个按钮暗示相同的对象。即。

app.controller("ctrl1", function ($scope, $filter) {
    $scope.GenderChoice = ["Male","Female"];
    $scope.selected = {};
});

<input ng-repeat="x in GenderChoice" 
       id="{{x}}Option" name="oo" type="radio" 
       ng-model="selected.Gender" value="{{x}}" />

Answer 2

看看这些代码，这就是你所需要的一切

<style>

  .green {
    color: green;
    }

  .red {
    color: red;
  }
</style>
    <input ng-repeat="x in GenderChoice" 
  id="{{x}}Option" name="oo" type="radio" ng-model="Gender" value="{{x}}" ng-click="class(Gender)"/>
     <p class={{append}}>{{gender}}</p>

您需要提交性别以访问其值

 var app = angular.module("App1", []);
 app.controller("ctrl1", function ($scope, $filter) {
    $scope.GenderChoice = ["Male","Female"];
    $scope.class = function(x){
      if (x == 'Male') {
        $scope.append = 'green';
        $scope.gender = 'Male';
      }
      if (x == 'Female') {
        $scope.append = 'red';
        $scope.gender = 'Female';
      }
    }
});

working plunker

我想使用带有ng-repeat的单选按钮，但它不起作用

2 个答案: