11

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 不起作用。

4

4 回答 4

12

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

分叉柱塞

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

更新的柱塞[ 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 月]

ng-changedcz.switcher 下面的问题表明，当重新选择单选按钮时，上面的解决方案不会触发事件处理程序。主要问题是从第二次更改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>
于 2014-08-23T02:29:31.283 回答
4

使用默认值，一切都会像魅力一样工作，不需要 $watch 范围或任何东西......是的，你需要 ng-model

  • ng-model -一切正常
  • ng-checked -确保存在 CHECKED 属性
  • ng-change -将触发你的函数 on-Change

HTML 示例：

<input type="checkbox" 
    ng-model="row.active"
    ng-checked="row.active"
    ng-true-value="1"
    ng-false-value="0"
    ng-change="update(row)"
/>
<!-- test -->
{{ row.active }}

JS 可选：

$scope.update = function(row) {
    console.log('row.active');
}
于 2015-04-23T16:37:21.103 回答
2

这是因为 ng-change需要 ngModel 存在。

希望这可以帮助。干杯!

于 2014-08-23T02:36:09.177 回答
0

该ng-change指令要求该ng-model指令存在。

从文档：

改变

请注意，此指令必须ngModel存在。

— AngularJS ng-change 指令 API 参考

和指令不应一起ng-model使用ng-checked

从文档：

已检查

如果里面的表达式为真，则在元素上设置选中的属性ngChecked。

请注意，此指令不应与 一起使用ngModel，因为这可能会导致意外行为。

— AngularJS ng-checked 指令 API 参考

而是从控制器设置所需的初始值。

有关详细信息，请参阅

于 2018-07-06T17:48:53.870 回答