ng-checked和ng-change单选按钮无法一起使用-angularjs

一尘不染

ng-checked和ng-change单选按钮无法一起使用-angularjs

angularjs

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

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无法正常工作。

阅读 220

2020-07-04

共1个答案

一尘不染

这是因为您没有使用ng-model：

plnkr

<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来确定模型的当前值。

更新的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>

更新的 [ 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>

2020-07-04