Checkboxes binding in AngualrJS - javascript

I have two checkboxes , one with Data Binding and other one is without Data Binding.As you can see in the code below.
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
<div>
<h2>What are your favorite sports?</h2>
<div ng-repeat="sport in ctrl.sports">
<label ng-bind="sport.label"></label>
<div>
With Binding:
<input type="checkbox" data-ng-true-value="YES" data-ng-false-value="NO" >
</div>
<div>
Using ng-checked:
<input type="checkbox" data-ng-checked='sport.selected === "YES"'>
</div>
<div>
Current state : {{sport.selected}}
</div>
</div>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
angular.module('notesApp',[])
.controller('MainCtrl',[function(){
var self = this;
self.sports = [
{label:'Basketball',selected: 'YES'},
{label:'Cricket',selected:'NO'},
{label:'Soccer',selected:'NO'},
{label:'Swimming',selected:'YES'}
];
}]);
</script>
</body>
</html>
When i click on the checkbox of 'with data binding', it should bind and reflect the value in current state label.But it is not happening.Why ?.Can someone help Please .

2 problems I found with your code:
You forgot ng-model
You should specify a constant for ng-true-value and ng-false-value, by specifying YES angular will look for a YES property on the scope, write 'YES' instead
Updated working plnkr:
http://plnkr.co/edit/rnYRUpIICC7HAKdKXf3i?p=preview
<html ng-app="notesApp">
<head>
<title>Notes App</title>
</head>
<body ng-controller="MainCtrl as ctrl">
<div>
<h2>What are your favorite sports?</h2>
<div ng-repeat="sport in ctrl.sports">
<label ng-bind="sport.label"></label>
<div>
With Binding:
<input type="checkbox" ng-model="sport.selected" data-ng-true-value="'YES'" data-ng-false-value="'NO'" />
</div>
<div>
Using ng-checked:
<input type="checkbox" data-ng-checked="sport.selected === 'YES'" />
</div>
<div>
Current state : {{sport.selected}}
</div>
</div>
</div>
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script type="text/javascript">
angular.module('notesApp',[])
.controller('MainCtrl',[function(){
var self = this;
self.sports = [
{label:'Basketball',selected: 'YES'},
{label:'Cricket',selected:'NO'},
{label:'Soccer',selected:'NO'},
{label:'Swimming',selected:'YES'}
];
}]);
</script>
</body>
</html>
EDIT: As #g00glen00b mentioned, before angular 1.3 ng-true-value accepted only constant values, so in case you're not using angular 1.3 or later you don't have to wrap YES in quotes.

The data-ng-true-value and data-ng-false-value are used when you're using the input[checkbox] directive, but they do require ngModel, as you can see in the docs (note that ng-model is not in square brackets).
Without providing the model, AngularJS has no way to know where to apply the true/false value to. Adding data-ng-model does seem to work, as you can see in the following fiddle.
<input type="checkbox" ng-model="sport.selected"
data-ng-true-value="YES"
data-ng-false-value="NO" />
Also, please note that when using AngularJS 1.3 or higher, the values of ng-true-value and ng-false-value should be an expression rather than a constant value. Which means that for AngularJS 1.3 and higher you'll have to replace it by ng-true-value="'YES'", for example:
<input type="checkbox" ng-model="sport.selected"
data-ng-true-value="'YES'"
data-ng-false-value="'NO'" />

You are not applying "data-ng-model" attribute to the the checkbox. Please replace your "With binding" check box code from below:
<input type="checkbox" data-ng-model="sport.selected" data-ng-true-value="YES" data-ng-false-value="NO" >

Related

Revert ng-model value in Angular JS

Is it possible to revert the model value when displaying it?
My controller has this property:
this.config = {client: false, name: true};
And I want to use the values like this:
<label>
<input ng-model="ctrl.config.client"> Client
</label>
<div ng-hide="ctrl.config.client">Client</div>
I'd like to show the input checked when the config.client value is false. How can I do it?
UPDATE: If you want to check a checkbox, and you use $scope you can use ng-true-value="false" and ng-false-value="true" to revert the default values. This works only, if you use $scope instead of this! Here is an example:
<body ng-app="app">
<div ng-controller="ctrl">
<label>
<input type="checkbox" ng-model="config.client" ng-true-value="false" ng-false-value="true">
</label>
<div ng-hide="config.client">Client</div>
</div>
<script>
angular.module('app', []).controller('ctrl', function($scope) {
$scope.config = {client: false, name: true};
});
</script>
</body>
And the plunker to try it: http://plnkr.co/edit/vRIZMb2CpDQAKHu91yhN?p=preview
If I understand correctly I think you want ng-checked.
And then negate it. So something like:
<label>
<input type="checkbox" ng-checked="!ctrl.config.client" ng-model="ctrl.config.client"> Client
</label>
I am assuming you want a checkbox although it isn't clear from your example.

Improving AngularJS view update with ngshow

Right now I have a view that uses ng-show to show a select DOM object when certain criteria are met and ng-show for a input DOM for all other cases. When I do this and switch between the two cases, input box takes longer to disappear than when the select appears. The delay is pretty noticeable so I want to improve it so that there's very little delay between the two DOM changes.
Is there any way to do this?
<div>
<input ng-show="field && (type == 'search' || fieldBucket[field].moreBuckets)"
type="text" ng-model="value">
<select class="facet-value"
ng-show="field && type == 'filter' && !fieldBucket[field].moreBuckets"
ng-model="value"
ng-options="fieldBucket[field].buckets">
</select>
</div>
I don't think it is anyway related to ng-show or hide it might depend on some data which you are expecting from server as response.
I have created a simple demo for you that in basic ng-show/hide there isn't any leg if their value is set at same time.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div class="wrapper" ng-app="test">
<div class="phone" ng-controller="TestCtrl" ng-init="type = 'search'">
search
filter
<div >
<input ng-show="type == 'search'"
type="text" ng-model="value">
<select class="facet-value"
ng-show="type == 'filter'"
ng-model="value"
ng-options="obj.name for obj in list">
</select>
</div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('test', []);
function TestCtrl($scope) {
$scope.list = [{name : 'one'}, {name : 'two'}];
}
</script>
</html>

How to check a radio button with angularJS?

I am creating a html / angularjs form. In the form i have a radio button with yes or no. So i want to check by default the button No.
This is the code i use :
My controller :
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myvariable = 'false';
}]);
My html code snippet:
<div class="col-lg-10">
<input type="radio" id="variable" name="variable" ng-model="myvariable" value="true">Yes</input>
<input type="radio" id="variable" name="variable" ng-model="myvariable" value="false">No</input>
</div>
But nothing is selected(checked) when i load the form the first time. I have to click to one value to have one selected (checked)
What's wrong with my code ? Here the plunker link
Thanks
I've made a fiddle for you. Check HERE
You should also set ng-value which should be true or false
<div ng-controller="MyCtrl">
<div ng-repeat="o in options">
<input type="radio" name="group1" ng-model="o.checked" ng-value="o.checked"></input>
<label>{{o.name}}</label>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.options = [
{ name: 'OPT1', id: 1, checked: false },
{ name: 'OPT2',id: 2, checked: false },
{ name: 'OPT3',id: 3, checked: true }
];
}
The reason why it does not work in your plunkr is because you create a module named "radioExample" but you don't use it when you write the HTML code.
Basically, replace this -
<html ng-app>
at the beginning of the code with this
<html ng-app="radioExample">
This way, when you declare the controller, AngularJS knows which module it needs to look into to get the controller.
Note - if you had not associated your controller with a module, then your code would work.
Check out ng-checked. What you have to do is to add ng-app="radioExample" to the html-Tag of your Application.
Then add ng-checked="myvariable == 'false'" and ng-value="'value'" like in the following plunker example:
Plunker
<div class="col-lg-10">
<input ng-checked="myvariable == 'true'" type="radio" id="variable" name="variable" ng-model="myvariable" value="true">Yes
<input ng-checked="myvariable == 'false'" type="radio" id="variable" name="variable" ng-model="myvariable" value="false">No
</div>
Error in data binding. Define myvariable in controller override value in radiobutton. You must use ng-repeat like
<div ng-repeat="o in options">
<input type="radio" name="name" ng-model="o.checked" ng-value="o.checked"></input>
<label>{{o.name}}</label>
</div>
(I use code from previous answer)

Clone elements in angularjs

I need to duplicate some input fields in order to handle data from clients. I have done it with jQuery http://jsfiddle.net/m7R3f/1/
HTML:
<fieldset id="fields-list">
<div class="pure-g entry">
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input-1" name="input-1">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="date" name="date">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input-2" name="input-2">
</div>
</fieldset>
<button id="add">Add</button>
JS
$(document).ready(function ()
{
$("#add").click(function ()
{
$(".entry:first").clone(false).appendTo("#fields-list");
});
});
However I just start learning Angular and want to convert these code to Angular.
I have read questions in stackoverflow and found the code with angularjs here: http://jsfiddle.net/roychoo/ADukg/1042/. However, it seem works only for ONE input field? Can I clone/duplicate several input fields using AngularJS? (in other word: convert my code above into AngularJS version?)
Thank you very much.
If you want to clone html element, the best way to use ng-repeat directive.
Your Controller
var App = angular.module('App', []).controller('Test', ['$scope',
function($scope) {
$scope.inputCounter = 0;
$scope.inputs = [{
id: 'input'
}];
$scope.add = function() {
$scope.inputTemplate = {
id: 'input-' + $scope.inputCounter,
name: ''
};
$scope.inputCounter += 1;
$scope.inputs.push($scope.inputTemplate);
};
}
])
<!DOCTYPE html>
<html ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Test">
<fieldset id="fields-list">
<div class="pure-g entry" ng-repeat="input in inputs track by input['id']">
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input" name="input-1">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="date" name="date">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input-2" name="input-2">
</div>
</div>
</fieldset>
<button type="button" id="add" ng-click="add()">Add</button>
</body>
</html>
Angular prevents of creation duplicated elements, to avoid this, use track by like in the example
You should create an array and use ng-repeat in your HTML. Each object in the array can contain the data necessary to populate your divs. If you want to start with three entries, then add the data for those three. If you want to add more, then simply push onto the array. Because of Angular's 2-way data binding your form field will appear once the element is pushed onto the array.
For more details on how to do this, checkout the To Do example on Angular's home page.
How about this(Fiddle)
add two more ng-model and push those models
$scope.add = function(){
$scope.items.push($scope.newitem1,$scope.newitem2,$scope.newitem3);
}

ng-model not working for radio button in AngularJS

I am new to Angular and I am trying to obtain the value of the radio button that the user has selected using ng-model. But I am not getting any output in "selected contact".
Here is My HTML
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form name="myForm" ng-controller="Ctrl">
<table border="0">
<th>Contact Type</th>
<tr ng-repeat="contact in contacttype"><td>
<input type="radio" ng-model="contactname" name="group1" value="{{contact.name}}">{{contact.name}}
</td>
</td></tr></table>
<tt>selected contact = {{contactname}}</tt><br/>
</form>
</body>
</html>
Below is my main.js
function Ctrl($scope) {
$scope.contacttype = [
{name: 'Both' },
{name: 'User'},
{name: 'Admin'}
];
}
What am I doing wrong here? Not able to figure out !!!
Because ng-repeat creates its own scope and what you are trying to do is assign the value to the parent scope from the child scope. So you can do
<input type="radio" ng-model="$parent.contactname" name="group1" value="{{contact.name}}">
So I had this same problem and using $parent with ng-model didn't appear to be working. My problem was that I had groups of checkboxes but used the same name attribute for each of them. It ended up hiding the default checked radio button in the last group.
Make sure you are using distinct name attributes for each distinct group.
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.devices = [{
nameD: "Device 1"
}, {
nameD: "Device 2"
}, {
nameD: "Device 3"
}, {
nameD: "Device 4"
}];
});
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app-controller-r.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<ul>
<li ng-repeat="device in devices">
<label>{{device.nameD}}
<input type="radio" ng-model="$parent.deviceType" value="{{device.nameD}}" />
</label>
</li>
</ul>
<button>Submit</button>
</form>
{{deviceType}}
</div>
</body>
</html>
if you are using the directive multiple times and you are using the for and id with labels ... Make sure to use a reference to the scope's $id
<li ng-repeat='add_type in types'>
<input id="addtester_{{ add_type.k }}_{{ $parent.$id }}" type="radio" ng-model="$parent.addType" ng-value='add_type.k' class="tb-form__input--custom" /
<label for="addtester_{{ add_type.k }}_{{ $parent.$id }}">{{ add_type.v }}</label>
</li>
Otherwise you will have been directives sharing the same inputs and make it possibly appear as if not working.

Categories

Resources