If I have two or more checkboxes how would I move unchecked checkboxes below the ones that are checked. At the moment I have simple HTML below, so if Checkbox 2 is checked it should move to the top and Checkbox 1 should move down.
The 2 ways I have thought of doing this is:
create and array on the scope and use ng-repeat to populate the checkboxes then apply a filter based on weather or not a checkbox is checked or splice the array. Only problem with this is I don't really want to define my checkboxes on the scope.
create a directive to somehow manipulate the dom element.
If someone has had a similar problem what would you recommend to be the best solution?
<div class="col-md-6">
Please check one or more boxes <i tooltip-placement="bottom" tooltip="On the Bottom!" class="fa fa-question-circle"></i>
<span ng-show="checked || checked_2" class="glyphicon glyphicon-ok text-success"></span>
<span ng-hide="checked || checked_2" class="glyphicon glyphicon-remove text-danger"></span>
<div class="checkbox">
<label>
<input ng-model="checked" type="checkbox" value="1">
Checkbox 1
</label>
</div>
<div class="checkbox">
<label>
<input ng-model="checked_2" type="checkbox" value="2">
Checkbox 2
</label>
</div>
<div ng-hide="checked || checked_2" class="text-danger">Some error message!</div>
<br/>
</div>
Try using the orderBy filter:
JS
var app = angular.module("app", []);
app.controller('Ctrl', function ($scope) {
$scope.users = [
{ Name: 'John', Selected: false },
{ Name: 'Mary', Selected: false },
{ Name: 'Jane', Selected: false },
{ Name: 'Tom', Selected: false },
{ Name: 'Benny', Selected: false }
];
});
HTML
<body ng-app="app" ng-controller='Ctrl'>
<ul>
<li ng-repeat="user in users | orderBy: ['-Selected','Name']">
{{user.Name }} <input type="checkbox" ng-model="user.Selected" />
</li>
</ul>
</body>
Demo Plunker
Related
My form is structured like the following:
<form class="content">
<div class="inner-content" ng-repeat="item in items">
<span class="inner-content-name">{{item.name}}</span>
<input
class="inner-content-toggle"
ng-class="{{item.className}}"
type="radio"
ng-click="toggle(item.id, item.name)"
ng-checked={{item.checked}}
/>
</div>
</form>
My question is more of why this does not work... When I click on one of the radio buttons in the rendered UI it adds the inner dot, however the inner dot when clicked again does not go away and stays permanently. As well if I select another radio button while one is already clicked both are now clicked and both will not unclick. This behavior is very much like a checkbox, but I want only one to be clicked ever. Any suggestions?
You must set the name attribute with the same value for the radio elements if they are mutually exclusive.
For example try this:
javascript:
this.items = [
{
name: 'foo',
nameAttr: 'radio-option1',
className: 'foo-bar',
checked: 1
},
{
name: 'bar',
nameAttr: 'radio-option1',
className: 'foo-bar',
checked: 0
}
];
html:
<form class="content">
<div class="inner-content" ng-repeat="item in $ctrl.items">
<span class="inner-content-name">{{item.name}}</span>
<input
class="inner-content-toggle"
name="{{item.nameAttr}}"
ng-class="{{item.className}}"
type="radio"
ng-click="$ctrl.toggle(item)"
ng-checked="item.checked"
/>
</div>
</form>
Playground: https://stackblitz.com/edit/angularjs-qhcken?file=home/home.controller.js
I'm developing an application using Angular 6. I have a big problem.
Using a template-driven form I would like that the item selected in a radio button can be sent when I press the submit button.
It's all right when I work with <input type="text" [(ngModel)] = "value" /> (value is a data field of my component), but if I try with this:
<div class="form-group">
<div *ngFor = "let option of options">
<div class="radio">
<input type = "radio"
name = "radio"
[(ngModel)] = "value"
/>
<label for="{{option.id}}">{{option.id}}</div>
</label>
</div>
</div>
</div>
The result is a bug! I can't even click the multiple buttons by moving the selector! Everything is stuck! Obviously it does not work with the form.
If I remove [(ngModel)] = "value" graphically it works, but without ngModel directive if I enter this code inside a template-driven form that uses (ngSubmit) it does not work.
Thanks a lot.
You are missing a value for each of the radio buttons so the binding does not work correctly. It is unable to determine which input should be checked so none of them get checked. Update the template to be something like:
<div *ngFor="let option of options">
<div class="radio">
<input type="radio"
name="radio"
id="radio-{{option.id}}"
[(ngModel)]="value"
[value]="option.value"
/>
<label for="radio-{{option.id}}">{{option.id}}
</label>
</div>
Stackblitz Demo
Radio buttons work different. To need to add a value to make it work. If you want to assign a value from angular use [value].
I have make it running in an example of stackblitz:
<div class="form-group">
<div *ngFor="let option of options; let i=index">
<div class="radio">
<input type="radio" id="{{option.id}}" name="radio{{i}}" [(ngModel)]="option.value" [value]="option.id" />
<label for="{{option.id}}">{{option.id}}</label>
</div>
</div>
</div>
<hr>
<h2>Values for options</h2>
<ul>
<ng-container *ngFor="let option of options; let i=index">
<li *ngIf="option.value !== ''">Value for {{option.id}}: {{option.value}}</li>
</ng-container>
</ul>
Component
value: any;
options = [
{
id: "test1",
value: ''
},
{
id: "test2",
value: ''
},
{
id: "test3",
value: ''
}];
Extension/Hints:
You can even use [(ngModel)] = "value" to assign the last selected value to value.
Give these radio buttons the same name name="radio" to ensure that only one of this group can be selected.
Inside the ts file :
radio_button_value = null;
box_options = [
{
"name": "Word",
"value": "word",
},
{
"name": "Line",
"value": "line"
},
]
Inside the html file:
Do notice of the tag 'name', it would we a great concern inside another for loop.
<div *ngFor="let box_opt of box_options; let i=index">
<input name="option-{{i}}" type="radio" [value]="box_opt.value" [(ngModel)]="radio_button_value">
{{box_opt.name}}
<br>
</div>
i have to following issue. I have an nested ng-repeat with two radio-buttons, when i select an radion-button the value is set correctly to the model. But when i filter to a value that's not in the collection the value is not set to the view (the model is still correct)
to reproduce:
Example
when you check all 3 radio-buttons to lets say 'read', than type 'x' into the input to filter, now remove the value from the input. the last radio is selected the others are not.
ps. i've tryed ng-value instead of value.
controller:
vm.list = [{id: 1, name: 'Item1', items: [{id: 1, name: 'SubItem1.1'}, {id: 2, name: 'SubItem1.2'}, {id: 3, name: 'SubItem1.3'}]}]
view:
<input type="text" ng-model="search" />
<ul>
<li ng-repeat="item in vm.list">
<h4 ng-bind="item.name"></h4>
<ul>
<li ng-repeat="subitem in item.items | filter:search">
<h4 ng-bind="subitem.name"></h4>
<input type="radio" name="{{item.id}}{{subitem.id}}" ng-model="subitem.permission" value="read" /> Read
<input type="radio" name="{{item.id}}{{subitem.id}}" ng-model="subitem.permission" value="write" /> Write
</li>
</ul>
</li>
change the input name
from
name="{{item.id}}{{subitem.id}}"
to
name="{{subitem.id}}"
I want to filter questions out by clicking on their associated category name checkbox. Ex: only questions with category X will be shown if only category X checkbox is checked.
I'm able to bind the names Cat1, Cat2, etc directly to the catfilters object:
<input type="checkbox" ng-model="catfilters.Cat1" /> Cat 1
<input type="checkbox" ng-model="catfilters.Cat2" /> Cat 2
<ul>
<li ng-repeat="q in questions | bycategory:catfilters">{{q.question.cat_id}}</li>
</ul>
This works.
However, I want to dynamically create the category checkboxes from a list in the controller, and bind them to the catfilters object:
$scope.cats = [
'Cat1',
'Cat2',
'Cat3'
];
//c is 'Cat1', 'Cat2', etc...
<div ng-repeat="c in cats">
<input type="checkbox" ng-model="catfilters.c">{{c}}</span>
</div>
<ul>
<li ng-repeat="q in questions | bycategory:catfilters">{{q.question.cat_id}}</li>
</ul>
But for some reason, this will not apply the filtering. I am not getting any errors though.
Note: I've also tried looking up by indexed property:
<div ng-repeat="c in cats">
<input type="checkbox" ng-model="catfilters[c]">{{c}}</span>
</div>
This also does not work
Filter:
angular
.module('DDE').
filter('bycategory', function() {
return function (questions, categories) {
var items = {
categories: categories,
out: []
};
angular.forEach(questions, function (value, key) {
if (this.categories[value.question.cat_id] === true) {
this.out.push(value);
}
}, items);
return items.out;
};
}
);
catfilters.c looks for a property called c in catfilters, regardless of if you have a variable c elsewhere.
Try looking it up by the indexed property catfilters[c] instead.
//c is 'Cat1', 'Cat2', etc...
<div ng-repeat="c in cats">
<input type="checkbox" ng-model="catfilters[c]">{{c}}</span>
</div>
I have made a plunkr. I implement using
<div ng-repeat="input in inputs">
<input type="text" ng-model="filter[input]">
</div>
and
$scope.inputs = ['foo','bar'];
$scope.filter={
'foo':"Foo",
'bar':"Bar"
}
It is working fine (which i think is similar to your scenario).There must be something error in your implementation.
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>