Bind to ng-model filter dynamically - javascript

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.

Related

How to get all checkboxes values in Angular (10+)?

I retrieve from the database what options should I show for all companies (only for showing purposes), this is my model:
export class OpcionesModel {
name: string;
isActive: boolean;
id?: string;
}
Then, I show all the options that are available (active):
<div class="row" *ngFor="let option of optionsArray; let i=index">
<div class="col-4">
<h5>{{option.name | titlecase}}</h5>
</div>
<div class="col">
<input type="checkbox">
</div>
</div>
What I want to do is to get all option's names and if its checkbox is checked or not and store that in an array, e.g:
[{'option 1', true}, {'option 2'}, false}, {'option 3', false}...].
EDIT: I've created an array: checkes: boolean[] =[];
if I do this <input type="checkbox" [(ngModel)]="checkes[i]">, I can get the checkboxes value but I need the option name too.
Thanks !!
<label>
<input type="checkbox" name="isActive" [(ngModel)]="option.isActive">
{{ option.name }}
</label>
taken from here: https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2
In your ts file, Your optionsArray array will be binded and the checked values will be updated when it changes
If you want to map it to an array with a different structure you can use the map method:
this.optionsArray.map(oa=> {return { myOptionName:oa.name, active:oa.isActive} })

ng-repeat display key value in view

http://jsfiddle.net/qq2L34eb/1/
I want to display Monday but the value attr is equal to one using ng-repeat.
$scope.days = [{
"Mondays": 1
}, {
"Tuesdays": 2
}];
But I got the entire object instead.
http://jsfiddle.net/qq2L34eb/1/
Any clue?
You need to use another ng-repeat inside,
<div ng-controller="MyCtrl">
<span ng-repeat="(key, value) in days">
<span ng-repeat="(key, value) in value">
<input type='checkbox' value="{{value}}" check-list='checked_days'> {{key}}
</span>
</span>
</div>
DEMO
http://jsfiddle.net/sajeetharan/2obrb921/
2 things -
1) Your object array can be changed.
Your $scope.days is an array, it should be object instead.
Like this
$scope.days = {
"Mondays": 1
,
"Tuesdays": 2
}
See fiddle
2) If you don't wish to change object array then add another ng-repeat within that like this. Like #Sajeetharan mentioned -
<span ng-repeat="(key, value) in days">
<span ng-repeat="(key, value) in value">
<input type='checkbox' value="{{value}}" check-list='checked_days'> {{key}}
</span>
</span>
According to your js fiddle in html write---
<span ng-repeat="pp in days">
<input type='checkbox' value="{{pp.key}}" check-list='checked_days'> {{pp.value}}
</span>
In Controller---
$scope.days = [{
"key": "1","value":"Monday"
}, {
"key": "2","value":"Tuesday"
}, ]
you can find result like this--
js fiddle
http://jsfiddle.net/qq2L34eb/2/

Angular-js - Populating Checkbox and track it based on JSON file

I have a nested Objects in JSON, and I need to populate the checkbox based on what comes in (dynamic) from JSON file, meaning, I wouldn't know in advance the name of the fields, or how many elements there could be. Here is a sample, but there could be more child and each child could have more or less item in it.
{
"Parent":{
"Child" :
{
"Child_01" : {
"description_01":false,
"description_02":false,
"description_03":false,
"description_04":false,
"description_05":false
},
"Child_02" :
{
"something_01":false,
"something_02":false,
"something_03":false,
"something_04": false
},
"Child_03" :
{
"things_01":false,
"things_02":false,
"things_03":false,
"things_04":false,
"things_05":false
}
}
}
}
Now, I need to populate a drop down from it, (child_01, child_02, child_03....) and when user choose one of them, I need to display checkboxes of all its properties. And of course be able to keep track of the chosen one.
Here is what I have.
$scope.children = response.data.parent.child;
$scope.childrenList = [];
angular.forEach($scope.children, function(value1, key1){
$scope.childrenList.push(key1);
});
and html:
<div ng-repeat="(key, data) in children">
<input ng-model="childrenListModel" type="checkbox" name="{{child}}" value="{{child}}">{{child}}</input>
</div>
Nothing works the way I intend to. Any help would be appreciated.
You probably need several nested ng-repeats. Have a look at this working plunker: http://plnkr.co/edit/K92JI7UlW9h6gh8SPeU5?p=preview
<div ng-repeat="child in children.Parent.Child">
<div ng-repeat="options in child">
<div ng-repeat="option in options">
<div ng-repeat="(key, val) in option">
<label for="{{key}}">
{{key}}
<input name="{{key}}" type="checkbox" ng-model="option[key]" />
</label>
</div>
</div>
<hr />
</div>
</div>

Radio button not working within nested ng-repeats and filter

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}}"

AngularJS directive move checkboxes

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

Categories