Question

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <script src="https://code.angularjs.org/1.4.1/angular.js"></script>
  <script>
    var app = angular.module('sampleapp', []);
    app.controller('samplecontroller', ["$scope", function($scope) {
      $scope.itemsToPush=[{amount:'',percentage:''}];
      $scope.myFunction = function() {
        $scope.itemsToPush.push({
                amount:'',
                percentage:''
            })

      };
    }]);
  </script>
</head>

<body ng-app="sampleapp" ng-controller="samplecontroller">


  <div class="test" ng-repeat="items in itemsToPush">
    <div class="form-group" style="margin-top: 20px;">
      <label class="checkbox-inline">
        <input type="radio" name="amount" value="amount" ng-model="items.amount"> Reduction Amount
      </label>
      <label class="checkbox-inline" style="padding-left: 0px;">
        <input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
      </label>
      <label class="checkbox-inline" style="padding-left: 0px;">
        <input type="radio" name="percentage" value="percentage" ng-model="items.amount"> Reduction Percentage
      </label>
      <label class="checkbox-inline" style="padding-left: 0px;">
        <input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
      </label>
    </div>

  </div>
  <div>
    <button class="btn btn-secondary" type="button" ng-click="myFunction()">Go!</button>
  </div>

</body>

</html>

您好。我在angularjs工作。我有一个包含两个单选按钮的div（只能选择一个）。我有一个名为Go.On的按钮单击Go我需要动态添加Radio div。我面临的问题是当div添加时，我只能从两个（原始和复制）div中选择一个无线电。需要从每个div中选择一个单选按钮。提前致谢。这是https://plnkr.co/edit/cLemG02uFyQupG7h74WM?p=preview

Answer 1

希望我能正确理解这一点。如果我错了，请纠正我。

您希望每行有两个选项。 1.金额 2.百分比其中只有一个可以选择。

要实现此目的，您需要为两个单选按钮设置相同的名称属性。

AVAudioSession

现在根据所选项目，您将在 items.amount 绑定中获得金额或百分比。

如果你想要多行，那么你应该为每一行使用不同的名称。为此，$ index变量将非常有用。

<div class="form-group" style="margin-top: 20px;">
  <label class="checkbox-inline">
    <input type="radio" name="reductionType" value="amount" ng-model="items.amount"> Reduction Amount
  </label>
  <label class="checkbox-inline" style="padding-left: 0px;">
    <input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
  </label>
  <label class="checkbox-inline" style="padding-left: 0px;">
    <input type="radio" name="reductionType" value="percentage" ng-model="items.amount"> Reduction Percentage
  </label>
  <label class="checkbox-inline" style="padding-left: 0px;">
    <input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
  </label>
</div>

reductionType _ {{$ index}} 为每次迭代创建一个新的单选按钮组，因此只能进行一次点击。（生成reductionType_0，reductionType_1等）

Answer 2

<div class="test" ng-repeat="items in itemsToPush">
<div class="form-group" style="margin-top: 20px;">
  <label class="checkbox-inline">
    <input type="radio" name="reduction{{[$index]}}" value="amount" ng-model="items.amount"> Reduction Amount
  </label>
  <label class="checkbox-inline" style="padding-left: 0px;">
    <input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
  </label>
  <label class="checkbox-inline" style="padding-left: 0px;">
    <input type="radio" name="reduction{{[$index]}}" value="percentage" ng-model="items.amount"> Reduction Percentage
  </label>
  <label class="checkbox-inline" style="padding-left: 0px;">
    <input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
  </label>
</div>

你需要为一个复选框命名相同并添加{{[%index]}}，所以在每个增量中每个div都有自己的复选框名称

添加一个无线电div动态angularjs

2 个答案: