Angular checkboxes disapear on select - javascript

I have a list of checkboxes in my app:
<div class="col-md-6" ng-repeat="item in segment.items">
<div class="checkbox">
<label>
<input
type="checkbox"
ng-model="item"
ng-checked="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
{{item.name}} <code>/ {{item.slug}}</code>
</label>
</div>
</div>
The data, that exists on the $scope as segment.items, looks something like this:
[
{"id":1,"slug":"nl","name":"Dutch","enabled":true},
{"id":4,"slug":"en","name":"English","enabled":false},
{"id":2,"slug":"fr","name":"French","enabled":true},
{"id":3,"slug":"de","name":"German","enabled":false}
]
This renders fine on load, and the correct checboxes are checked. However, if I select a checkbox, the label disappears and the binding appears to be lost. If I deselect a checkbox, it seems to work fine, but if I select it again, it disappears as well. No errors show up in the console.
This is what it looks like on load:
And as soon as I click on "English" I get this
I'm new to Angular so I suspect I am doing something obvious wrong. Can anybody please point me in the right direction?

pointing your ng-model to ng-model="item" will cast your item into a boolean.
Also, you should not use ng-model with ng-checked : https://docs.angularjs.org/api/ng/directive/ngChecked
what you should do is the following :
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>

You need to bind the ng-model directly on your enabled boolean attribute:
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.segment = {
items: [
{"id":1,"slug":"nl","name":"Dutch","enabled":true},
{"id":4,"slug":"en","name":"English","enabled":false},
{"id":2,"slug":"fr","name":"French","enabled":true},
{"id":3,"slug":"de","name":"German","enabled":false}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
{{segment.items}}
<div class="col-md-6" ng-repeat="item in segment.items">
<div class="checkbox">
<label>
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
{{item.name}} <code>/ {{item.slug}}</code>
</label>
</div>
</div>
</div>

Related

AngularJS Checkbox retain check value when the page reloads

I have a search screen with a checkbox, and want to retain the checkbox selection when the user navigates away and comes back to the screen.
Using the session storage, i am able to retain the value in the model, but the checkbox checked does not display correct based on the model value.
When I search online, it looks like i cannot use ng-model and ng-checked together. But I don't want to use jquery either.
Is it possible to do this with just Angular? Thanks in Advance.
<div class="container" ng-controller="SearchController as vm" data-ng-init="vm.init()">
<form ng-submit="vm.Search()">
<input type="checkbox" id="chkActive" name="chkActive" value="Active" ng-model="vm.searchInput.active" ng-checked="vm.searchInput.active" /> <span>Show Active Records</span>
<button id="searchBtn" type="submit">
</form>
</div>
Angular Controller Code:
vm.searchInput = { active: true};
vm.init = function () {
if ($window.sessionStorage.getItem("Search_Active")) {
vm.searchInput.active = $window.sessionStorage.getItem('Search_Active'); }
}
vm.Search = function () {
$window.sessionStorage.setItem('Search_Active', vm.searchInput.active);
}
I haven't checked it, but I'm sure the first line should read:
vm.searchInput = { active: true};
If the model value is there, you want to bind to it, and you know it's good then why would you need both checked and model? Binding the value to the input is enough. As you can see below, using both is problematic.
angular.module('app', []);
angular.module('app').controller('c', c);
function c() {
var self = this;
self.checked = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app "app" ng-controller="c as ctrl">
<div>
<label>Checked</label>
<input type="checkbox" ng-model="ctrl.checked" />
<div>
<span>Checked: {{ctrl.checked}}</span>
</div>
</div>
<div>
<label>Checked Trouble</label>
<input type="checkbox" ng-model="ctrl.checked" ng-checked="!ctrl.checked" />
<div>
<span>Checked: {{ctrl.checked}}, !Checked: {{!ctrl.checked}}</span>
</div>
</div>
<div>
<label>Checked Double Trouble</label>
<input type="checkbox" ng-checked="!ctrl.checked" ng-model="ctrl.checked" />
<div>
<span>Checked: {{ctrl.checked}}, !Checked: {{!ctrl.checked}}</span>
</div>
</div>
</div>

validation with angular checkbox-model

I'm using checklist-model in my angular/electron application and have following three checkboxes.
Both
USA
Canada
To start with, by default 'USA' is checked, however if the user clicks on 'Both' or 'Canada' , I need to check for a specific flag, and if the flag is false, I need to alert the user and avoid 'Both' or 'Canada' being clicked.
<div style="height:115px;background-color:#FBF9EC" class="form-control" >
<label ng-repeat="item in locations" style="width:80%">
<input type="checkbox" checklist-model="locationData.item" checklist-value="item" checklist-before-change="checkListvalidate(item)" ng-change="checkBoxClickFunc(item)" ng-click="locationClick()">
{{item}}
</label>
</div>
In the controller:
$scope.locationClick = function(){
if(!myFlag){
return false;
}
};
The spec for checklist-before-change says
An angular expression evaluated each time before the checklist-model has changed. If it evaluates to 'false' then the model will not change anymore.
What is it that I'm not doing correctly ....
You have many listeners in the checkedbox input :
checklist-before-change="checkListvalidate(item)"
ng-change="checkBoxClickFunc(item)"
ng-click="locationClick()"
I think these are too much to address your need and besides, it complicates the understand of the logic and it may create side-effects.
Why not use only checklist-before-change directive and make the call to locationClick() inside it ? I think it should be enough.
Here an example :
<body ng-controller="MainCtrl">
<div style="height:115px;background-color:#FBF9EC" class="form-control" >
<label ng-repeat="item in locations" style="width:80%">
<input type="checkbox" checklist-model="locationData.item"
checklist-value="item" checklist-before-change="checkListvalidate(item)" >
{{item}}
</label>
</div>
</body>

Mapping objects in ng-value and ng-model (Angularjs)

An old code to display the radio boxes on angular side was written like this before:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
value="{{item}}"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>
The problem was item is an object and the function saveRadio used to save the object in text format. We tried substituting the value with ng-value as below. Now preselection of saved answer is not happening. Code is shown below:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>
The scope variable data has the array of answers map.
Am I missing something here or is there something more to be added for Object comparison?
Figured this out, apparently ng-model and ng-value can store objects but doesn't do object comparison. Adding a ng-checked with the unique value will preselect the radiobox like so:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-checked="item.option == data[item].option)"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>
You can achieve the goal with this approach also:
$scope.items = [{id:1,name:"first"}];
$scope.savedAnswer = {id:1,name:"first"};
var index = $scope.items.map(function(obj, index) {
if(obj.name == $scope.savedAnswer.name) {
return index;
}
}).filter(isFinite);
$scope.preselectedAnswer = $scope.items[index];
View
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-change="saveRadio(x,y,z)"
ng-model="preselectedAnswer">
{{item.name}}
</label>
plunker : http://plnkr.co/edit/83atxi7JGtyBSlRqK2xo?p=preview

angular checkbox does not bind to model

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 .

How to set default value checked in a checkbox from database using AngularJS

While editing the record the data comes in their respective fields for editing, but the checkbox is not checked if its value is 1.
It should be in checked state if it has 1 and not checked if it has 0 as the datatype of the field is tinyint. I am retrieving the data from JSON array via PHP. I am trying to get value by ng-checked="{{rec.isSpecial}}" but it is not working.
Here is my HTML:
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-checked="{{rec.isSpecial}}" ng-model="rec.isSpecial">
<span class="fa fa-check"></span>Special
</label>
</div>
</div>
</div>
here is my JS
$scope.rec = $resource('api/AdminArea/category/edit/:id', {
id: id
}).get(function(data) {
$scope.rec = data;
});
Since your data returns numbers and not true or false values you could do like so:
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-checked="rec.isSpecial==1" ng-model="rec.isSpecial">
<span class="fa fa-check"></span>Special
</label>
</div>
</div>
</div>
see fiddle for more info
You don't need ng-checked at all, ng-model is enough for it to work. If your rec.isSpecial is set to 1 for it to be checked then just your input like this:
<input type="checkbox" ng-model="rec.isSpecial" ng-value="1" />
and the Angular will automatically check that checkbox.
The expression ng-checked={{ ... }} expects a true or false statement.
If you would set rec.isSpecial = true, in your Angular controller, your code should work!
'use strict';
var app = angular.module('MyApp',[]);
app.controller('myController', function ($scope) {
$scope.isSpecial =true;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group" ng-app ="MyApp" ng-controller="myController">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-checked="{{isSpecial}}" ng-model="isSpecial">
<span class="fa fa-check"></span>Special
</label>
</div>
</div>
</div>
You don't really need the directive ng-checked if you are using ng-model in the tag input.
Since it is a checkbox, the model will be a boolean, so you need to make a cast. This example will work
HTML
<div data-ng-app="app">
<div data-ng-controller="MainController">
Check
<input type="checkbox" data-ng-model="isSpecial">
</div>
</div>
JS
angular.module('app', []);
angular.module('app')
.controller('MainController', mainController);
mainController.$inject = ['$scope'];
function mainController($scope){
$scope.check = 0;
$scope.isSpecial = ($scope.check === 1) ? true : false;
}

Categories