ng-checked和ng-change单选按钮不能一起工作 - angularjs

Question

http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview

JS

angular.module("sampleapp", []).controller('samplecontroller', function($scope,$rootScope) {
  $scope.radii = [
    {id:.25, checked:false, name:"1/4 Mile"},
    {id:.5, checked:false, name:"1/2 Mile"},
    {id:1, checked:false, name:"1 Mile"},
    {id:2, checked:true, name:"2 Mile"},
    {id:3, checked:false, name:"3 Mile"},
    {id:4, checked:false, name:"4 Mile"},
    {id:5, checked:false, name:"5 Mile"}
];

$scope.handleRadioClick = function(){
    alert();

};
});

和HTML

          <div class="radio">
            <label>
              <input type="radio" name="radius"

                   ng-change="handleRadioClick()"
                   ng-checked="radius.checked">

              {{radius.name}}

            </label>
          </div>

      </li>

注意根据半径范围结构检查"2 Mile"无线电输入.为什么ng-change不会触发功能？

如果我添加ng-model,函数会触发,但ng-checked不起作用.

Answer 1

这是因为你没有使用ng-model:

FORKED PLUNKER

<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick(selectedRadius)"
         ng-model="radius.checked">

    {{radius.name}}

  </label>
</div>

更新:

对不起,我没注意到你想要检查一个默认的单选按钮,如果是这种情况,那么你所采取的方法是不正确的.您必须将模型视为一组单选按钮中的非单个部件,但作为一个整体,它们应该是一个值.您不必使用ng-repeat无线电范围变量,而是使用另一个ng-model作为selectedRadius模型.您输入的无线电需要有一个值,在这种情况下,我们将使用它ng-value来确定模型的当前值.

UPDATED PLUNKER [ 2014年9月 ]

JAVASCRIPT

调节器

  $scope.radii = [
    {id:.25, name:"1/4 Mile"},
    {id:.5, name:"1/2 Mile"},
    {id:1, name:"1 Mile"},
    {id:2, name:"2 Mile"},
    {id:3, name:"3 Mile"},
    {id:4, name:"4 Mile"},
    {id:5, name:"5 Mile"}
  ];

  // selected value is {id:2, name:"2 Mile"}
  $scope.selectedRadius = $scope.radii[3];

HTML

<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick(radius)"
         ng-model="selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>
</div>

更新的PLUNKER [ 2015年1月 ]

dcz.switcher下面的问题表明,ng-change当重新选择单选按钮时,上面的解决方案不会触发事件处理程序.主要问题是指的ng-model是ng-repeat范围而不是控制器的范围来自第二次改变.要解决此问题,您可以使用该$parent属性.另一种方法是使用controllerAs别名并使用别名本身来访问控制器的属性.要了解有关AngularJS中范围的更多信息,我建议您在此处阅读更多相关信息.

HTML

<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick($parent.selectedRadius)"
         ng-model="$parent.selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>
</div>