I have checked question How to bind to list of checkbox values with AngularJS. But this question explains list of arrays and best ways to handle it in Angular controller.
<input type='checkbox' name="filter" checked>
How can we bind value to checkbox to have value as modal 0 when unchecked and 1 when checked? What should be in HTML and Controller?
$scope.filter = 0;
Try this:
$scope.filter = 0;//or 1
HTML:
<input type="checkbox" ng-model="filter" ng-true-value="1" ng-false-value="0">
Here is an modified example based on the AngularJS documentation
Controller
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.checkboxModel = 0; //Set checkbox to unchecked
}]);
HTML
<input type="checkbox" ng-model="checkboxModel" ng-true-value="1" ng-false-value="0">
Angular has provided ng-true-value & ng-false-value directives to fullfill your requirement. Through it you can associate true/false values with checkbox and same will be using by model as well.
You can try below code
<div ng-controller="ValidateCtrl">
Check Value: <input type="checkbox" ng-true-value="1" ng-false-value="0" ng-model="checkBoxModel"/>
</div>
Controller
---------
function ValidateCtrl($scope) {
$scope.checkBoxModel = '1';
};
So initially checkbox will be checked.
Related
//This is my HTML code wherein am returning a list from backend.
<ul>
<li ng-repeat=" opt in bcfList1 track by $index" > <input type="radio" name="buildid" id="buildid" ng-model = $parent.selected ng-value="bcfList1" required>
{{ opt }}
</li>
</ul>
//This is my controller.js program
$scope.getDetails =function(data){
var id=data.id;
$('#addNode3').modal('show');
UpgradeService.getDataById(id).then(function(data){
if(data!=null){
$scope.List1=data.BUILDNUMBER;
}
});
}
I need to get the string value that'll be listed in front of the radio button. So once I click on radio button it should send that value to the controller.js
By using ng-model I need a solution.
Help me out!!
You need to add ng-change to your input fields with a call to that function. Here is a quick demo:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.b = [1, 2, 3, 4, 5, 6, 7, 8, 9];
$scope.getDetails = function(index) {
console.log("sending data", index,$scope.selected);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="a in b track by $index">
<input type="radio" ng-model="$parent.selected" ng-value="a" ng-change="getDetails($index)" /> {{a}}
</div>
</div>
If I understand correctly, you need to gather which input type radio was clicked in controller and send this information to backend.
ng-model directive is very good approach here and you can use it just like so:
html
<label>
One
<input type="radio" value="one" ng-model="radio">
</label>
<label>
Two
<input type="radio" value="two" ng-model="radio">
</label>
<br><br>{{ radio }}<br>
JS
app.controller('MainCtrl', function($scope) {
$scope.radio = '';
$scope.consoleLogRadio = function() {
console.log($scope.radio);
}
});
Take a look at plunker example
In my controller I have this member:
$scope.sameOptionsOnReturn = true;
and in my view:
<input type="checkbox"
ng-model="sameOptionsOnReturn"
ng-checked="sameOptionsOnReturn"
ng-value="true"
ng-change="setReturnOptions" />
But the input does not bind to the checkbox; it's always true. What is wrong?
Note: removing ng-value="true" doesn't make any difference.
Since it does work in the snippet below, I have to assume there's something wrong elsewhere in your code.
function SuperController($scope) {
$scope.sameOptionsOnReturn = true;
}
angular.module('myApp', []);
angular
.module('myApp')
.controller('SuperController', SuperController)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="SuperController as s">
<input type="checkbox"
ng-model="sameOptionsOnReturn"
ng-checked="sameOptionsOnReturn"
ng-value="true"
ng-change="setReturnOptions" />
{{sameOptionsOnReturn}}
</div>
</div>
ng-model works for your bindings . So you don`t need to put ng-value="true" which making your checkbox always checked .remove it from the input checkbox . ng-model value will make your checkbox checked or unchecked .
I am unable to get the value of a selected radio button in angular controller. The reportTypeId I use in angular controller does not fetch the value of the radio button. Can someone guide me where exactly I am wrong ?
HTML
<div class="col-md-3">
<input type="radio" ng-model="reportTypeRadio" value="reportType.reportTypeId">
<a href="#reportTypeEntityList/{{reportType.reportTypeId}}">
{{reportType.reportTypeLabel}}
</a>
</div>
Controller
mdmApp.controller('Controller', function($scope, $http, $location, $routeParams) {
$scope.reportTypeRadio = reportTypeId;
$scope.viewReportTypeEntityList = function() {
$location.path('/reportTypeEntityList/' +reportTypeId);
}
});
You need to use model value from ngModel directive:
$scope.viewReportTypeEntityList = function() {
$location.path('/reportTypeEntityList/' + $scope.reportTypeRadio);
};
It worked. I just made the below changes to my html. used ng-value instead of value, and $parent in ng-model to use the parent scope of the ng-repeat directive.
<div class="col-md-3">
<input type="radio" ng-model="$parent.reportTypeRadio" ng-value="reportType.reportTypeId">
<a href="#reportTypeEntityList/{{reportType.reportTypeId}}">
{{reportType.reportTypeLabel}}
</a>
I have an Array in my controller. On the basis of that Array I'm generating Input fields On my page.
My AngularJs code
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.names = ['morpheus', 'neo', 'trinity'];
});
And on page I'm generating my input fields
<form name="myForm1" ng-controller="MainCtrl">
<div ng-repeat="gg in names">
<input type="text" ng-model="control[index]"/>
</div>
<input type="submit" value="submit"/>
</form>
Now it generating ng-model for each textbox are control[index]
but I want to generate ng-model for each textbox like
control[0]
control[1]
control[2]
Plunker
you have to use
<input type="text" ng-model="control[$index]"/>
and there is no scope variable called control so you need to define the scope variable also, as below
$scope.control = {};
here is the updated Plunker
I am building radio buttons dynamically. ng-change='newValue(value) stops being called after each radio button has been pressed once.
this works: Clicking on the radio buttons changes the value to foo/bar/baz.
http://jsfiddle.net/ZPcSe/19/
<div ng-controller="MyCtrl">
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="baz" ng-change='newValue(value)'>
<hr>
{{value}}
</div>
this code does not: The {{value}} - "label" is not updated once each radio button has been pressed at least once. Aparently ng-change is not fired any more.
<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
<input name="asdf" type="radio" ng-model="value" value={{i}} ng-change='newValue(value)'>
</span>
{{value}}
</div>
http://jsfiddle.net/ZPcSe/18/
The Controlles is the same each time:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.value = '-';
$scope.newValue = function(value) {
$scope.value = value;
}
}
Thanks for your help.
ngRepeat creates new scope, so trying to set value sets it on the new scope. The workaround is to reference a property on an object that is on the parent scope--the object lookup happens on the parent scope, and then changing the property works as expected:
HTML:
<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
<input name="asdf" ng-model="options.value" value="{{i}}" type="radio">
</span>
{{options.value}}
JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.options = {
value: '-'
};
$scope.newValue = function(value) {
// $scope.options.value = value; // not needed, unless you want to do more work on a change
}
}
You can check out a working fiddle of this workaround. See angular/angular.js#1100 on GitHub for more information.
Just a quick work-around, we can achieve the same- using ng-model="$parent.value", because it would refer to the parent of ng-repeat scope i.e- in myCtrl scope
Only Change in ng-model-
<input name="asdf" type="radio" ng-model="$parent.value" value={{i}} ng-change='newValue(value)'>
Here is the fiddle
Try ng-click instead of ng-change.