简体   繁体   中英

How to pre-select radio buttons in angularjs

When my model value is true then I want the radio buttons to be selected when loaded, but its happening the otherway around. All false models are getting selected. How do fix this.

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)

        }
      ]);

use ng-value here is the doc for angular radio

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

then, if the ng-value is true and the model value is also true then check box will checked

here is the update Demo

<input type="checkbox" id="rempass" ng-model="rememberMe" ng-checked="rememberMeUserInfoCheck()" >  $scope.rememberMeUserInfoCheck=function() { return true; } 

这对我有用

I fixed the 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>

you had it right.... just needed to add a ! so the model will take the opposite of the scope value... since you are using them for both I guess its wont hurt your code

ng-checked =“ true”添加到您的单选框

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

For those working with FormGroup and FormControl :

In the template:

  1. Add formControlName = sameNameforAllRadioButtonsOfAChoice as an attribute to your radio button input tags.
  2. Also add value = "true" and value = "false" (you can also do it with numbers and strings, but I will continue with boolean).

In the component:

  1. Add the name, eg sameNameforAllRadioButtonsOfAChoice , to your FormGroup:

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

This sets the default value to false . In the FormControl, be careful to write it as a string!

BONUS - If you need Validation:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM