Question

我显示了一组radiobuttons，并且希望根据用户输入跟踪所选索引，但出于某种原因使用Angular - 只需点击几下，更改事件就会停止工作。有什么想法吗？

我有一个范围列表和一个正确显示所有内容的div：

<div data-ng-repeat="user in users">

http://jsfiddle.net/sproket/8Wtu6/

如果您使用的是Firefox，我已启用控制台。

Answer 1

相反：

ng-model="selectedUser"

写：

ng-model="$parent.selectedUser"

修正演示 Fiddle

在ng-repeat指令中，每个元素都有自己的作用域（您可以将其称为 isolate 作用域），因此在您的示例中ngModel它已被锁定。要使用ngModel 外部添加$parent前缀

Answer 2

您的功能仅针对每个单选按钮触发一次，如果您将ng-change更改为ng-click，则会一直触发：

<input type="radio" id="radio{{$index}}" name="chkUserName" value="{{$index}}" ng-model="selectedUser" ng-click='selectUser(selectedUser)'>

但更好的方法是完全跳过click事件并直接绑定到模型，如下所示：

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  Selected user: {{model.selectedUser}}

        <div data-ng-repeat="user in users">
            <input type="radio" id="radio{{$index}}" 
               name="chkUserName" value="{{$index}}"
               ng-model="model.selectedUser">
            <label for="radio{{$index}}">{{user.name}}</label>
        </div>    

</div>

在你的控制器中：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    console.log("MyCtrl")
    $scope.name = 'BLAH';

     var users = [{
        name: "SUPPORT, User",
        code: "support"
    }, {
        name: "Test, Radiologist ",
        code: "rtest"
    }, {
        name: "Test, Physician",
        code: "ptest"
    }, {
        name: "TEST, CLERK ",
        code: "ctest"
    }, {
        name: "Test, Transcriptionist",
        code: "ytest"
    }];
    $scope.users = users;
    $scope.model = {};
    $scope.model.selectedUser = 0;

}

无需捕获点击或更改事件！

Answer 3

将ng-change更改为ng-click。 ng-change记住你以前的答案。

http://jsfiddle.net/jonesmac82/376SS/1/

<input type="radio" id="radio{{$index}}" name="chkUserName" value="{{$index}}" ng-model="selectedUser" ng-click='selectUser(selectedUser)'>

AngularJS单选按钮更改事件停止工作

3 个答案: