Use ng-value for radio button (angularjs)

Question

I'am new with angularjs.. I want to make a selection using radio button and save as boolean value. When I use ng-value, then the value save into database is null. This is the code for html.

<label><input type="radio" ng-model="information" ng-value="TRUE" name="maklumat">Yes</label><br />
<label><input type="radio" ng-model="information" ng-value="FALSE" name="maklumat">False</label>

George · Accepted Answer · 2017-04-07 07:19:30Z

4

The issue is with what you've entered in the ng-value value, just change them to lower case like so.

<label>
    <input type="radio" ng-model="information" ng-value="true" name="maklumat">Yes
</label>
<br />
<label>
    <input type="radio" ng-model="information" ng-value="false" name="maklumat">False
</label>

Fiddle for example

EDIT 1

The reason it is saving as null is because it's trying to evaluate the value FALSE which is undefined.

answered Apr 7, 2017 at 7:19

George

6,7592 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nishant123 Over a year ago

Also it is better to assign a default value to $scope.information=false in controller (for this case as the data is going in database).

tanmay · Accepted Answer · 2017-04-07 07:29:56Z

2

ng-value expects AngularJS expression to which ngModel will be be set when the radio is selected.

And expressions being case-sensitive, if you set ng-value="true" it sets your what you have in ng-model to true, but if you have ng-value="TRUE", it tries to get $scope.TRUE which it doesn't find and your ng-model gets set to null.

Here's an example.

angular.module('radioExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.TRUE = "something totally different"
    $scope.specialValue = {
      "id": "12345",
      "value": "green"
    };
  }]);

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-radio-input-directive-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>

<body ng-app="radioExample">

  <form name="myForm" ng-controller="ExampleController">
    <label>
    <input type="radio" ng-model="color.name" ng-value="specialValue">
    SpecialValue
  </label><br/>
    <label>
    <input type="radio" ng-model="color.name" ng-value="true">
    true
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" ng-value="TRUE">
    TRUE
  </label><br/><br/>
    <tt>color = {{color.name | json}}</tt><br/>
  </form>
  <br><br/><br/> Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
</body>

</html>

edited Apr 7, 2017 at 7:29

answered Apr 7, 2017 at 7:11

tanmay

7,9112 gold badges24 silver badges39 bronze badges

1 Comment

George Over a year ago

Actually, if he wanted a boolean value it's better to use ng-value as it execute the value to be a boolean rather than a string. Check this fiddle for an example. To expand on this as well in the documentation you've linked it says ng-value should be used instead of the value attribute if you need a non-string ngModel (boolean, array, ...).

Collectives™ on Stack Overflow

Use ng-value for radio button (angularjs)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related