CODEWITHSUNDEEP
javascriptangularjs
Jamie
Jamie

Reputation: 10886

AngularJs Input radio value

I've got a form where a user has to say if he is male or female. In my database it's a 1 or 0. How could I make this with AngularJs input radio.

Right now I've got this:

<div class="form-group">
    <label class="col-md-2 control-label">Radios</label>

    <div class="col-md-10">
        <div class="radio radio-primary">
            <label>
                <input type="radio" name="male" id="male" ng-model="employeeCtrl.employee.Gender" ng-value="0"><span class="circle"></span><span class="check"></span>
                Male
            </label>
        </div>
        <div class="radio radio-primary">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios4" ng-model="employeeCtrl.employee.Gender" ng-value="1"><span class="circle"></span><span class="check"></span>
                Female
            </label>
        </div>
    </div>
</div>

But this is not working. The right radio button is not selected also the value won't change.

Upvotes: 0

Views: 69

Answers (1)

Ruwantha R.
Ruwantha R.

Reputation: 82

Run the code and see is this what you expect. Use same name for radio button, and you can use different id for each controller.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="">
    
    <div class="form-group">
    <label class="col-md-2 control-label">Radios</label>

      <div class="col-md-10">
          <div class="radio radio-primary">
              <label>
                  <input type="radio" id='gender_male' name="gender" ng-model="employeeCtrl.employee.Gender" ng-value="0"><span class="circle"></span><span class="check"></span>
                  Male
              </label>
          </div>
          <div class="radio radio-primary">
              <label>
                  <input type="radio" id='gender_female' name="gender" ng-model="employeeCtrl.employee.Gender" ng-value="1"><span class="circle"></span><span class="check"></span>
                  Female
              </label>
          </div>
      </div>
    Gender: {{employeeCtrl.employee.Gender}}
    </div>

  </body>

</html>

Upvotes: 1

Related Questions