【问题标题】:How to pre-select radio buttons in angularjs如何在angularjs中预先选择单选按钮
【发布时间】:2015-05-12 20:52:28
【问题描述】:

当我的模型值为true 时,我希望在加载时选择单选按钮,但它会发生相反的情况。所有false 模型都被选中。如何解决这个问题。

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

angular.module('radioExample', [])
      .controller('ExampleController', ['$scope',
        function($scope) {
          $scope.kind = [{
            name: 'task',
            selected: false
          }, {
            name: 'bug',
            selected: false
          }, {
            name: 'other',
            selected: true
          }, {
            name: 'rfe',
            selected: false
          }]
          $scope.$watch('kind', function() {
            console.log('changed', JSON.stringify($scope.kind, null, 2))
          }, true)

        }
      ]);

【问题讨论】:

标签: angularjs radio-button


【解决方案1】:

使用ng-value这里是angular radio的文档

<input type="radio" name="" id="" value="" ng-model="k.selected" ng-value="true" />

那么,如果ng-valuetrue 并且模型值也是true 那么复选框将被选中

这里是update Demo

【讨论】:

  • 是的,这行得通!是否有切换选择的设置?因为现在它一次选择多个单选按钮,我需要一次只能选择一个选项
  • 很高兴为您提供帮助,:) 如果您只想选择一个收音机,那么您必须为每个单选按钮使用相同的 model,在您的情况下,每个收音机都有不同的型号按钮,但你可以这样做plnkr.co/edit/pOzHeDvqz32qIxBGexvL?p=preview :)
  • 在这里,你应该得到一个饼干!
【解决方案2】:

我修复了 plunker plunker

 <form name="myForm" ng-controller="ExampleController">
    <br />all 'false' radio buttons are selected when 'value' is used -------------
    <br />
    <div ng-repeat="k in kind">
      <input type="radio" name="" id="" value="" ng-model="!k.selected" value="k.selected" />{{k.name}}
    </div>
    <br />all radio buttons are selected when 'ng-value' is used -------------
    <br />
    <div ng-repeat="k in kind">
      <input type="radio" name="" id="" value="" ng-model="k.selected" ng-value="k.selected" />{{k.name}}
    </div>
</form>

你做对了....只需要添加一个 !所以模型将采用与范围值相反的值......因为你同时使用它们我想它不会伤害你的代码

【讨论】:

  • 感谢乔尼的回复
【解决方案3】:
<input type="checkbox" id="rempass" ng-model="rememberMe" ng-checked="rememberMeUserInfoCheck()" >  $scope.rememberMeUserInfoCheck=function() { return true; } 

这对我有用

【讨论】:

  • 你能详细说明一下吗?
  • $scope.rememberMeUserInfoCheck=function() { return true; } 这对我有用
  • 对不起,我的错误
【解决方案4】:

ng-checked ="true" 添加到您的收音机输入字段

`<input type="radio" ng-model="modelName" name="radioName" value="value1" ng-checked="true">`

【讨论】:

  • 这是唯一对我有用的东西。不是 ng-model 也不是 ng-value。
【解决方案5】:

对于那些使用FormGroupFormControl 的人:

在模板中:

  1. formControlName = sameNameforAllRadioButtonsOfAChoice 作为属性添加到您的单选按钮input 标签中。
  2. 还添加value = "true"value = "false"(您也可以使用数字和字符串,但我将继续使用布尔值)。

在组件中:

  1. 添加名称,例如sameNameforAllRadioButtonsOfAChoice,您的 FormGroup:

myForm = new FormGroup({sameNameforAllRadioButtonsOfAChoice: new FormControl('false')})

这会将默认值设置为false。在FormControl中,注意写成字符串!

奖励 - 如果您需要验证:

  1. import { FormControl, FormGroup, Validators } from '@angular/forms';
  2. myForm = new FormGroup({sameNameforAllRadioButtonsOfAChoice: new FormControl('false', [Validators.required])})

【讨论】:

    猜你喜欢
    • 2015-03-04
    • 1970-01-01
    • 2012-04-15
    • 2011-06-11
    • 2016-02-23
    • 2015-06-03
    • 2015-01-02
    • 1970-01-01
    • 2023-03-02
    相关资源
    最近更新 更多