AngularJs：将 ng-model 绑定到单选按钮列表

Question

我正在尝试将单选按钮列表中的 selected 值绑定到 ng-model

我有：

<!DOCTYPE html>

<html ng-app="testApp">
    <head>
        <script src="./bower_components/angular/angular.min.js"></script>
        <script src="test.js"></script>
    </head>
    <body ng-controller="testController">
        <form>
            <div ng-repeat="option in occurrenceOptions">
                <input type="radio" name="occurrence" ng-value="option" ng-model="selectedOccurrence" /><label>{{ option }}</label>
            </div>
        </form>
        <div>The selected value is : {{ selectedOccurrence }}</div>

        <!-- This works -->
        <input type="radio" ng-model="selected2" ng-value="'1'"> 1
        <input type="radio" ng-model="selected2" ng-value="'2'"> 2
        <input type="radio" ng-model="selected2" ng-value="'3'"> 3

        <div>This selected value is : {{ selected2 }} </div>
    </body>
</html>

对于我的控制器：

(function () {

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

    app.controller('testController', function($scope) {
        $scope.occurrenceOptions = [];

        $scope.occurrenceOptions.push('previous');
        $scope.occurrenceOptions.push('current');
        $scope.occurrenceOptions.push('next');

        $scope.selected2;
    });
}());

在第一部分中，我尝试 ng-repeat 所有 occurrenceOptions 并将它们全部绑定到同一个模型。但是，每次我 select 某些东西 selectedOccurrence 值都不会改变。

请参阅 plunkr：https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1?p=preview

没有 ng-repeat 并且只需输入所有单选按钮，我就能让它工作。为什么 ng-repeat 版本不起作用？

Answer 1

它不起作用的原因是，您正在使用 ng-repeat 并且您正在其中定义 ng-model 变量。 ng-repeat 的工作方式是，它在集合的每次迭代中创建一个新的子作用域（原型继承）。因此 ng-repeat 模板中的 ng-model 属于新创建的范围。这里 ng-model="selectedOccurrence" 在 ng-repeat.

的每次迭代中创建 selectedOccurrence 范围变量

要克服此类问题，您需要在 AngularJS

中定义模型时遵循 dot rule

标记

<body ng-controller="testController">
  <form>
    <div ng-repeat="option in occurrenceOptions track by $index">
      <input type="radio" name="occurrences" ng-value="option" ng-model="model.selectedOccurrence" />
      <label>{{ option }}</label>
    </div>
  </form>
  <div>The selected value is : {{ model.selectedOccurrence }}</div>
</body>

代码

$scope.model = {}; //defined a model object
$scope.model.selectedOccurrence = 'current'; //and defined property in it

Demo Plunkr

或者另一种首选方法是在声明控制器时使用 controllerAs 模式（在控制器内部使用 this 而不是 $scope）。

HTML

<body ng-controller="testController as vm">
    <form>
        <div ng-repeat="option in vm.occurrenceOptions">
            <input type="radio" name="occurrence" ng-value="option" ng-model="vm.selectedOccurrence" /><label>{{ option }}</label>
        </div>
    </form>
</body>

ControllerAs Demo

AngularJs：将 ng-model 绑定到单选按钮列表

AngularJs: Binding ng-model to a list of radio buttons

javascript

angularjs

angularjs-scope

angularjs-controller