Question

这是我的Plunker：https://plnkr.co/edit/vuzqRCcxGsKTgRbEEhJV?p=preview

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <script type="text/javascript">
      var app = angular.module("myApp");
        app.controller("appCTRL",function($scope,$http){
            $scope.thing = {
              food: '',
              color: ''
            };
        });     
    </script>
</head>
<body ng-app="myApp" ng-controller="appCTRL">
  <form>
    <input type="radio" value="carrot" ng-model="thing.food" name="food">Carrot
    <input type="radio" value="apple" ng-model="thing.food" name="food">Apple
    <br>
    <input type="radio" value="orange" ng-model="thing.color" name="color">Orange
    <input type="radio" value="red" ng-model="thing.color" name="color">Red
  </form>

</body>
</html>

当我选择＆＃34;胡萝卜＆＃34;单选按钮，我喜欢＆＃34; orange＆＃34;自动选择。如果我选择＆＃34; apple，＆＃34;我喜欢＆＃34; red＆＃34;被选中;

如何使用AngularJS执行此操作？

Answer 1

我分叉你的plunker并创建了一个新的例子，有几种不同的方法来实现这一目标。在这两个例子中，我定义了一个fruits数组，它可以包含不同的可能组合。

$scope.fruits = [{
    food: 'carrot',
    color: 'orange'
}, {
    food: 'apple',
    color: 'red'
}];

在第一个例子中，我静态地为对象分配了复选框，如下所示：

<input type="radio" ng-value="fruits[0]" ng-model="thing">{{fruits[0].food}}
<input type="radio" ng-value="fruits[1]" ng-model="thing">{{fruits[1].food}}
<br>
<input type="radio" ng-value="fruits[0]" ng-model="thing">{{fruits[0].color}}
<input type="radio" ng-value="fruits[1]" ng-model="thing">{{fruits[1].color}}
<br> {{thing}}

这里，所有输入框都绑定到thing对象，它们的值由它们对应的fruits数组元素决定。

在第二个示例中，我使用ng-repeat动态生成输入，这使得配置更加灵活：

<label ng-repeat="fruit in fruits">
<input type="radio" ng-value="fruit" ng-model="selected.fruit">{{fruit.food}}</label>
<br>
<label ng-repeat="fruit in fruits">
<input type="radio" ng-value="fruit" ng-model="selected.fruit">{{fruit.color}}</label>
<br> {{selected}}

使用ng-repeat时，可以通过向fruits数组添加对象来动态生成任意数量的单选按钮。

注意，我也可以在fruits中迭代<div>数组并生成fruit和color无线电，但是对于此示例，我选择了保持相同的布局。

另外值得注意的是，使用ng-repeat时，会创建子范围，因此ng-model需要对象属性。绑定到thing或selected直接无法正常工作。（$parent.thing可行，但我试图避开$parent。）

完整代码：

＆＃13;

<!DOCTYPE html>
<html ng-app="myModule">

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  <script type="text/javascript">
    var app = angular.module("myModule", []);
    app.controller("appCTRL", function($scope, $http) {
      $scope.thing = {};

      $scope.selected = {
        fruit: {}
      };

      $scope.fruits = [{
        food: 'carrot',
        color: 'orange'
      }, {
        food: 'apple',
        color: 'red'
      }];
    });
  </script>
</head>

<body ng-controller="appCTRL">
  <input type="radio" ng-value="fruits[0]" ng-model="thing">{{fruits[0].food}}
  <input type="radio" ng-value="fruits[1]" ng-model="thing">{{fruits[1].food}}
  <br>
  <input type="radio" ng-value="fruits[0]" ng-model="thing">{{fruits[0].color}}
  <input type="radio" ng-value="fruits[1]" ng-model="thing">{{fruits[1].color}}
  <br> {{thing}}

  <h2>Using ng-repeat</h2>
  <label ng-repeat="fruit in fruits">
  <input type="radio" ng-value="fruit" ng-model="selected.fruit">{{fruit.food}}</label>
  <br>
  <label ng-repeat="fruit in fruits">
  <input type="radio" ng-value="fruit" ng-model="selected.fruit">{{fruit.color}}</label>
  <br> {{selected}}
</body>

</html>

＆＃13;

Forked Plunker：https://plnkr.co/edit/VY16Lb6L5xJvdt7ROY7O?p=preview

如何通过选择第一个组自动选择第二个单选按钮组？

1 个答案: