1

请检查下面的代码，

angular.module('myApp', []).controller('myController', ['$scope',
  function($scope) {
    setTimeout(function() {
      $scope.policies = [{
        drivers: [{
          gender: 'M'
        }, {
          gender: 'F'
        }]
      }, {
        drivers: [{
          gender: 'M'
        }, {
          gender: 'F'
        }]
      }];
      $scope.$apply();
    }, 1000)

  }
]);
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>

<div ng-app='myApp'>
  <div ng-controller='myController'>
    <div ng-repeat='policy in policies'>
      <div ng-repeat='driver in policy.drivers'>
        Gender : M
        <input type='radio' name='driverGender{{$index}}{{$parent.$index}}' value='M' ng-model='driver.gender' />F
        <input type='radio' ng-model='driver.gender' name='driverGender{{$index}}{{$parent.$index}}' value='F' />
      </div>
    </div>
  </div>
</div>

我试图在 2 个级别的 ng-repeat 中实现一对单选按钮。我可以检查单选按钮，值按预期更改。但如果这些值是从控件分配的，则只有最后一对单选按钮会被更新。当我将版本更改为 1.2.0 时，它工作正常。请检查下面的示例

angular.module('myApp', []).controller('myController', ['$scope',
  function($scope) {
    setTimeout(function() {
      $scope.policies = [{
        drivers: [{
          gender: 'M'
        }, {
          gender: 'F'
        }]
      }, {
        drivers: [{
          gender: 'M'
        }, {
          gender: 'F'
        }]
      }];
      $scope.$apply();
    }, 1000)

  }
]);
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.js"></script>

<div ng-app='myApp'>
  <div ng-controller='myController'>
    <div ng-repeat='policy in policies'>
      <div ng-repeat='driver in policy.drivers'>
        Gender : M
        <input type='radio' name='driverGender{{$index}}{{$parent.$index}}' value='M' ng-model='driver.gender' />F
        <input type='radio' ng-model='driver.gender' name='driverGender{{$index}}{{$parent.$index}}' value='F' />
      </div>
    </div>
  </div>
</div>

代码或任何替代方案有问题吗？

4

4 回答 4

1

在个人在这个问题上花费了 2-3 个小时之后，我没有找到这个问题的真正原因。我唯一得到的是这个东西在 Angular 版本1.3.0-beta.19中开始刹车。

更改日志是130-beta19-rafter-ascension-2014-08-22。

注意：此答案并未为您提供此问题的实际原因。

要解决此问题，请考虑name从您的字段中删除该属性，input[type=radio]因为收音机可以正常工作，ng-model并且根据文档，name它也是可选的。https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

angular.module('myApp', []).controller('myController', ['$scope',
  function($scope) {
    setTimeout(function() {
      $scope.policies = [{
        drivers: [{
          gender: 'M'
        }, {
          gender: 'F'
        }]
      }, {
        drivers: [{
          gender: 'M'
        }, {
          gender: 'F'
        }]
      }];
      $scope.$apply();
    }, 1000)

  }
]);
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.19/angular.js"></script>

<div ng-app="myApp" ng-controller="myController">
  {{policies | json}}
  <br><br>

  <div ng-repeat="policy in policies">
    <div ng-repeat="driver in policy.drivers">
      Gender : M
      <input type="radio" value="M" ng-model="driver.gender" /> F
      <input type="radio" ng-model="driver.gender" value="F" />
    </div>
  </div>
</div>

另一个似乎对我有用的解决方案。考虑使用指令：

angular.module('myApp', []).controller('myController', ['$scope',
  function($scope) {
    setTimeout(function() {
      $scope.policies = [{
        drivers: [{
          gender: 'M'
        }, {
          gender: 'F'
        }]
      }, {
        drivers: [{
          gender: 'M'
        }, {
          gender: 'F'
        }]
      }];
      $scope.$apply();
    }, 1000)

  }
]);

angular.module('myApp').directive('radio', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<input type="radio" name="{{getFooName()}}" />',
    controller: function($scope) {
      $scope.getFooName = function() {
        return 'driverGender' + $scope.$index +  $scope.$parent.$index;
      }
    }
  }
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.19/angular.js"></script>

<div ng-app="myApp" ng-controller="myController">
  {{policies | json}}
  <br>
  <br>

  <div ng-repeat="policy in policies">
    <div ng-repeat="driver in policy.drivers">
      Gender : M
      <radio ng-model="driver.gender" value="M"></radio>F
      <radio ng-model="driver.gender" value="F"></radio>
    </div>
  </div>
</div>

于 2016-08-13T05:14:31.640 回答
1

我认为唯一的问题是单选按钮名称存在冲突，因此如果您将单选按钮代码替换为以下代码：

    <input type='radio' name='driverGender{{$index}}{{$parent.$index}}0' value='M' ng-model='driver.gender' />F
    <input type='radio' ng-model='driver.gender' name='driverGender{{$index}}{{$parent.$index}}1' value='F' />

请参考 plnkr 的工作演示： https ://plnkr.co/edit/GKtCRtunNrvLiksbCuXE?p=preview

于 2016-08-12T13:58:21.653 回答
1

最后我找到了一个解决方案.. 而不是'driverGender{{$index}}{{$parent.$index}}'我创建了返回相同的函数。

$scope.getRadioButtonName=function(index,parentIndex){
  return 'gender'+index+parentIndex;
}

在下面检查它。

// Code goes here
angular.module('myApp', []).controller('myController', ['$scope',
  function($scope) {
   
      $scope.policies = [{
        drivers: [{
          gender: 'M'
        }, {
          gender: 'F'
        }]
      }, {
        drivers: [{
          gender: 'M'
        }, {
          gender: 'F'
        }]
      }];
     
    $scope.getRadioButtonName=function(index,parentIndex){
      return 'gender'+index+parentIndex;
    }
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

<div ng-app='myApp'>
  <div ng-controller='myController'>
    <div ng-repeat='policy in policies'>
      <div ng-repeat='driver in policy.drivers'>
        Gender : M
        <input type='radio' ng-model='driver.gender' name='{{getRadioButtonName($index,$parent.$index)}}' value='M' />F
        <input type='radio' ng-model='driver.gender' name='{{getRadioButtonName($index,$parent.$index)}}' value='F' />
      </div>
    </div>
  </div>
</div>

于 2016-08-13T06:38:04.553 回答
0

您应该创建一个循环并将所需的值分配给所有这些：

angular.forEach($scope.policies, function(policy) {
   angular.forEach(policy.drivers, function(driver) {
     driver.gender = "M";
   });
});

希望能帮助到你。

于 2016-08-12T13:49:28.327 回答