AngularJs:将 ng-model 绑定到单选按钮列表 [英] AngularJs: Binding ng-model to a list of radio buttons

查看：19
本文介绍了AngularJs:将 ng-model 绑定到单选按钮列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我有:

<html ng-app="testApp"><头><script src="./bower_components/angular/angular.min.js"></script><script src="test.js"></script><body ng-controller="testController"><表格><div ng-repeat="出现选项中的选项"><input type="radio" name="occurrence" ng-value="option" ng-model="selectedOccurrence"/><label>{{ option }}</label>

</表单><div>选中的值为:{{ selectedOccurrence }}

<!-- 这有效--><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>这个选定的值是:{{ selected2 }} </div></html>

对于我的控制器:

(函数(){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;});}());

在第一部分中，我尝试重复所有 occurrenceOptions 并将它们全部绑定到同一个模型.但是，每次我选择某些内容时，selectedOccurrence 值都不会改变.

参见 plunkr:https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1?p=preview

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

解决方案

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

要克服这样的问题，您需要在 AngularJS 中定义模型时遵循 dot rule

标记

<表格><div ng-repeat="option inoccurrenceOptions track by $index"><input type="radio" name="occurrences" ng-value="option" ng-model="model.selectedOccurrence"/><label>{{ option }}</label>

</表单><div>选择的值为:{{model.selectedOccurrence}}</div>

代码

$scope.model = {};//定义一个模型对象$scope.model.selectedOccurrence = '当前';//并在其中定义属性

演示 Plunkr

<小时>

OR 另一种首选方法是在声明控制器时使用 controllerAs 模式(在控制器中使用 this 而不是 $scope).

HTML

<表格><div ng-repeat="vm.occurrenceOptions 中的选项"><input type="radio" name="occurrence" ng-value="option" ng-model="vm.selectedOccurrence"/><label>{{ option }}</label>

</表单>

ControllerAs 演示

Im trying to bind the selected value in a list of radio buttons to an ng-model

I have:

<!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>

For my controller:

(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;
    });
}());

In the first section, I tried to ng-repeat all the occurrenceOptions and bind them all to the same model. However, each time I select something the selectedOccurrence value does not change.

See plunkr: https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1?p=preview

without the ng-repeat and just typing out all the radio buttons, I am able to get this to work. Why is the ng-repeat version not working?

解决方案

The reason behind it is not working is, you are using ng-repeat & you are defining ng-model variable in it. The way ng-repeat works is, it create a new child scope(prototypically inherited) on each iteration of collection. So the ng-model which resides in ng-repeat template, belongs that newly created scope. Here ng-model="selectedOccurrence" create selectedOccurrence scope variable on each iteration of ng-repeat.

To overcome such a problem you need to follow dot rule while defining model in AngularJS

Markup

<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>

Code

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

Demo Plunkr

OR Another preferred way would be using controllerAs pattern while declaring controller(use this instead of $scope inside controller).

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 绑定到单选按钮列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆