Use ng value for radio button (angularjs)
I'm new with angular. I want to make a selection with a radio button and store as boolean
value. When I use ng-value
then the value of persisting in the database null
. This is the code for the 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>
source to share
ng-value
expects an AngularJS expression to be set to ngModel when radio is selected.
And case sensitive expressions, if you set ng-value="true"
it sets 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, t, and your ng-model
gets the value 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 value to be the value of `$scope.specialValue`.
</body>
</html>
source to share
The problem is when you entered in the value ng-value
, just change them to lower case.
<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>
EDIT 1
The reason why it is storing null is because it tries to evaluate a value FALSE
that is undefined.
source to share