I have this ionic tag already populated and with all items unchecked:
<ion-checkbox ng-repeat="categoria in listaCategorias"
ng-model="categoria.checked"
ng-checked="categoria.checked"
ng-change="recuperarServicos(categoria)">
{{ categoria.nmCategoria }}
</ion-checkbox>
And here my controller code that has a list of 'categoria ids':
//here I have the ids recovered from database that I split into an array of ids
var idsCategoria = $scope.meuanuncio.idsCategoria.trim().split(',');
if($scope.listaCategorias.length > 0)
{
//for each item in my listaCategorias (used in ng-repeat)
for (var i = 0; i < $scope.listaCategorias.length; i++) {
var item = $scope.listaCategorias[i];
//I compare id from each item with my list recovered from database
if(idsCategoria.indexOf($scope.listaCategorias[i].idCategoria) != -1)
{
//If the item id exist in database list, I check the item
item.checked = true;
// Below there are other ways that I tried to use
// $scope.listaCategorias[i].Selected = true;
// $scope.listaCategorias[i].checked = true;
$scope.listaCategorias[0].checked = true;
}
}
};
But I can´t do my ion-checkbox item checked.
What am I doing wrong ?
Thanks.
ng-model="categoria.checked"
looks fine, don't think you need the ng-checked though.
var item = $scope.listaCategorias[i];
item.checked = true;
Nope, the item gets lost through the loop. I see you were trying with:
$scope.listaCategorias[i].checked = true;
Did you get an error or something? Because this looks like the way to do it.
Maybe try looping on a div around the ion-checkbox? aka
<div ng-repeat="categoria in listaCategorias">
<ion-checkbox ng-model="categoria.checked"
ng-change="recuperarServicos(categoria)">
{{ categoria.nmCategoria }}
</ion-checkbox>
</div>
try this :
<div ng-repeat="categoria in listaCategorias track by $index">
<ion-item class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" ng-model="categoria.checked" ng-change="recuperarServicos(categoria)">
</label>
{{categoria.nmCategoria}}
</ion-item>
</div>
Controller:
$scope.recuperarServicos = function(categoria){
if(categoria.selected && ($scope.selectedItems.indexOf(categoria.name) < 0)){
$scope.selectedItems.push(categoria.name);
}else{
$scope.selectedItems.splice($scope.selectedItems.indexOf(categoria.name), 1);
}
};
hope this helps you..in someway..!
My problem was when I attribute my array of items to the $scope.listaCategorias.
I was doing that:
$scope.listaCategorias = listaCategorias;
But I need to do that:
$scope.listaCategorias.push.apply($scope.listaCategorias, listaCategorias);
I was building an array with the checked attribute inside, but when I associate my built list, I was associating the first one, which has not the checked attribute setted.
Let me show my code now.
My view :
<div ng-repeat="item in listaCategorias track by $index">
<ion-item class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" ng-model="item.checked" ng-checked="item.checked" ng-change="recuperarServicos(item)">
</label>
{{ item.nmCategoria }}
</ion-item>
</div>
My controller:
//here I get all my 'categorias' from datatable
listaCategorias = appFactory.recuperarCategorias();
//If list is not null go ahead
if(listaCategorias != null) {
//split into an array all my 'categoria' ids
var idsCategoria = $scope.meuanuncio.idsCategoria.split(',');
//if list has items go ahead
if(listaCategorias.length > 0) {
for (var i = 0; i < listaCategorias.length; i++) {
//if 'categoria' id exists in datatable list set true, else false
if(idsCategoria.indexOf(listaCategorias[i].idCategoria) != -1) {
listaCategorias[i].checked = true;
}
else {
listaCategorias[i].checked = false;
}
}
};
//Here is the point !!! I need to load my $scope variable this way to build all my items correctly
$scope.listaCategorias.push.apply($scope.listaCategorias, listaCategorias);
}
Related
I am making a to do list. Each list item includes a remove button when created.
But I cannot access these remove buttons in my script, because it is not included in my DOM, although I used '.appendChild'. Can anyone help?
const buttonSubmit = document.querySelector('#button-submit');
const form = document.querySelector('form');
const icons = document.querySelector('#icons');
let toDoList = document.querySelector('#todolist');
const input = document.querySelector('#formtext');
form.addEventListener('submit', (e) => {
e.preventDefault();
const newListItem = document.createElement('li');
newListItem.innerHTML = '<span>' + input.value + '</span>' +
'<span id="icons">' +
'<button id="check" class="buttonlist">' + '<img src="checked.png" alt="">' + '</button>' +
'<button id="remove" class="buttonlist">' + '<img src="remove.png" alt="">' + '</button>' +
'<button id="edit" class="buttonlist">' + '<img src="edit.png" alt="">' + '</button>' + '</span>';
toDoList.appendChild(newListItem);
form.reset();
})
const buttonCheck = document.querySelector('#check');
const buttonEdit = document.querySelector('#edit');
const buttonRemove = document.getElementById('remove');
buttonRemove.addEventListener('click', function() {
alert('remove list item');
})
<div class="container-box">
<h1>To Do List</h1>
<br>
<form action="">
<input type="text" id="formtext" name="formtext">
<button id="button-submit">Add Item</button>
</form>
<br><br><br><br>
<!-- Dynamic list here -->
<ul id="todolist"> </ul>
</div>
Problems
ids must be unique, every time you add a task to the list -- after the first one everything is invalid HTML. When directed to an id the browser will find the first id then stop and ignore the duplicate ids. Use class and/or name attributes for any replicated tags.
The reason why the remove button doesn't work is because the reference to the button was defined when it didn't exist.
Figure I
// After page is loaded...
const buttonRemove = document.getElementById('remove');
// Console will tell you buttonRemove is null
// User has not entered any data nor has user clicked the add button
Moreover, even if that was fixed by referencing the button after it was created, binding it as shown on Figure II will only work for the first button only.
Figure II
buttonRemove.addEventListener('click', function() {
alert('remove list item'); // Don't use alert() use console.log()
})
Solution
Reference tags after they are created. In the OP (Original Post), the contents of the <li> is rendered htmlString which makes referencing newly created tags problematic plus binding to dynamically created tags individually should be avoided if it's feasible and practical in which in most cases it is.
To handle events for an unknown amount of dynamically created tags, bind the event to a static ancestor tag, which in the OP is <ul> or any of it's parent tags (even <body>, document, and window but it's best to be as close as possible). Then make it so the event handler controls which tags respond and how. See Appendix located at the very end of this answer for more details.
There are two examples:
Example A - revised OP code
Example B - a todo list using HTMLFormElement interface, see Appendix
Both examples have commented step-by-step details
Example A
// Reference <form>, <ul>, and <input>
const form = document.querySelector('form');
const list = document.querySelector('ul');
const input = document.querySelector('#text');
// Bind <form> to submit event
form.addEventListener('submit', (e) => {
// Stop default behavior of <form> during submit ecent
e.preventDefault();
// Create <li> and <output>
const item = document.createElement('li');
const out = document.createElement('output');
// Assign value of <input> to the value of <output>
out.value = input.value;
// Add <output> to <li> -- <li> to <ul>
item.append(out);
list.append(item);
/*
Run a for loop 3 times -- on each iteration...
...create an <input> and assign type as "button"...
...buttons [name] and [value] is determined by current index...
...add button to <li>
*/
for (let i = 0; i < 3; i++) {
let btn = document.createElement('input');
btn.type = 'button';
let cmd = i === 0 ? 'done' : i === 1 ? 'edit' : i === 2 ? 'remove' : false;
btn.name = cmd;
btn.value = cmd;
item.append(btn);
}
// Reset <form>
form.reset();
});
// Bind <ul> to click event
list.addEventListener('click', manageList);
// Event handler always passes event object by default
function manageList(e) {
// Reference the tag user clicked
const clk = e.target;
// If user clicked a remove button remove it's parent tag
if (clk.name === 'remove') {
clk.parentElement.remove();
}
if (clk.name === 'edit') {
console.log('EDIT');
}
if (clk.name === 'done') {
console.log('DONE');
}
}
li {
display: flex;
align-items: center
}
[type='button'] {
text-transform: capitalize
}
<form>
<input id="text" name="text" type="text">
<button>Add Item</button>
</form>
<br>
<ul></ul>
Example B
// Bind <form> to click event
document.forms.todo.onclick = taskList;
// Event handler akways passes the event object
function taskList(e) {
// Reference the tag user clicked
const clk = e.target;
// Reference all form controls
const IO = this.elements;
/*
If the user clicked the add button...
...reference the <ul>...
...create <li> and <output>...
...add text from <input> to <output>...
...add <output> to <li>...
...Run a for loop 3 times -- on each iteration...
...create an <button> and assign type as "button"...
...buttons [name] and text is determined by current index...
...add button to <li>...
...add <li> to <ul>...
...clear <input>
*/
if (clk.name == 'add') {
const list = IO.list.firstElementChild;
const item = document.createElement('li');
const text = document.createElement('output');
text.value = IO.data.value;
item.append(text);
for (let i = 0; i < 3; i++) {
let btn = document.createElement('button');
btn.type = 'button';
let cmd = i === 0 ? 'done' : i === 1 ? 'edit' : i === 2 ? 'remove' : false;
btn.name = cmd;
btn.textContent = cmd;
item.append(btn);
}
list.append(item);
IO.data.value = '';
}
/*
If the user clicked a remove button...
...find the <li> ancestor of remove button and remove
it thereby removing the <output> and itself as well
*/
if (clk.name === 'remove') {
clk.closest('li').remove();
}
if (clk.name === 'done') {
console.log('DONE');
}
if (clk.name === 'edit') {
console.log('EDIT');
}
}
<form id='todo'>
<input id='data' required><button name='add' type='button'>Add</button>
<fieldset id='list'>
<ul></ul>
</fieldset>
</form>
Appendix
Events
Event delegation
HTMLFormElement
HTMLFormControlsCollection
Form Controls
I'm looking for some example but cannot see anyone googling it, just what i want is to hardcode 2 or 3 words, thank you so much. Do i have to look for on ionic 3? or in angular2 better?
In your html file:
<ion-searchbar type="text" debounce="500" (ionChange)="getItems($event)"></ion-searchbar>
<ion-list *ngIf="isItemAvailable">
<ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>
in your ts file:
// Declare the variable (in this case and initialize it with false)
isItemAvailable = false;
items = [];
initializeItems(){
this.items = ["Ram","gopi", "dravid"];
}
getItems(ev: any) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
const val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() !== '') {
this.isItemAvailable = true;
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
} else {
this.isItemAvailable = false;
}
}
Mohan Gopi's answer is complete, but in order to make use of the debounce attribute, you have to use the ionChange event instead of the ionInput event.
<ion-searchbar type="text" debounce="500" (ionChange)="getItems($event)"></ion-searchbar>
...
...
That way the event will trigger after the user stops typing (after 500 milliseconds have passed since his last key press), instead of whenever a key is pressed.
Just wanted to share something I tried myself. I have implemented the autocomplete from Angulars material design (https://material.angular.io/components/autocomplete/overview)
But it did not look exactly as the rest of the ionic input components. I also tried the ion-searchbar but I did not like the search input, I wanted a normal ion-input So I did this:
html:
<ion-list>
<ion-item>
<ion-label position="floating">Supplier*</ion-label>
<ion-input (ionChange)="onSearchChange($event)" [(ngModel)]="supplier"></ion-input>
</ion-item>
<ion-item *ngIf="resultsAvailable">
<ion-list style="width: 100%; max-height: 200px; overflow-y: scroll;">
<ion-item *ngFor="let result of results" (click)="supplierSelected(result)" button>
<ion-label>{{result}}</ion-label>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
in component.ts:
resultsAvailable: boolean = false;
results: string[] = [];
ignoreNextChange: boolean = false;
onSearchChange(event: any) {
const substring = event.target.value;
if (this.ignoreNextChange) {
this.ignoreNextChange = false;
return;
}
this.dataService.getStrings(substring).subscribe((result) => {
this.results = result;
if (this.results.length > 0) {
this.resultsAvailable = true;
} else {
this.resultsAvailable = false;
}
});
}
supplierSelected(selected: string) :void {
this.supplier = selected;
this.results = [];
this.resultsAvailable = false;
this.ignoreNextChange = true;
}
Granted the question was about ion-searchbar but maybe somebody out there also wants to use a normal ion-input like me. There is no clear icon but I can live with that, or just add one next to the ion-input. Could be that there is a way to turn the ion-searchbar into a normal ion-input style? Can't find it though in the docs.
How can I using checkbox for select one (just like radio), my code:
<div *ngFor="let address of addresses; let i = index;">
<ion-item>
<ion-checkbox id="cb_{{address.id}}" (ionChange)="selectedAddress(address.id,addresses,i)" checked="false"></ion-checkbox>
</ion-item>
</div>
in ts file:
selectedAddress(id,addresses,index){
for(let i=0; i<addresses.length; i++){
if(index != i){
document.getElementById("cb_"+addresses[i].id).checked = false;
}
}
}
but it is not working, anyone know how to achieve it? thanks a lot
Bind address.checked = false; kind thing when page is loading using for loop or using the API.
pass address object trough
selectedAddress(address,addresses,i) method.
in.ts
selectedAddress(address,addresses,i)
{
address.checked = !address.checked;
}
I am using jsTree in angularjs and using "select_node" in "ready". This method is returning false. On code debugged, it is observed that tree.instance._model.data doesn't have that node so this.get_node(obj); returns false. (below is code snippet)
select_node : function (obj, supress_event, prevent_open, e) {
var dom, t1, t2, th;
if($.isArray(obj)) {
obj = obj.slice();
for(t1 = 0, t2 = obj.length; t1 < t2; t1++) {
this.select_node(obj[t1], supress_event, prevent_open, e);
}
return true;
}
obj = this.get_node(obj); //here it returns false
if(!obj || obj.id === '#') {
return false;
}
}
I am not sure why tree.instance._model.data doesn't have data at that time because it often works when I refresh the browser.
Any help? Below is my code snippet.
me.onTreeReady = function (eve, tree) {
tree.instance.deselect_all();
tree.instance.refresh(true, true);
var response = tree.instance.select_node(defaultNode);
}
This must be some kind of race condition related to your angular directive provider.
This issue has been resolved. I had added "id" to html, so when multiple instances were created with same id it gives the above error. Issue resolved by removing this id.
Old Code
<div class="row no-margin" cg-busy="ctrl.promise">
<div class="bg-white">
<div **id="treeView"** js-tree="ctrl.treeConfig"
should-apply="ctrl.applyModelChanges()"
ng-model="ctrl.treeData"
tree="ctrl.treeInstance"
tree- events="ready:ctrl.onTreeReadyEvent;select_node:ctrl.onNodeSelectEvent;deselect_node:ctrl.onNodeDeselectEvent">
</div>
</div>
</div>
New Code:
<div class="row no-margin" cg-busy="ctrl.promise">
<div class="bg-white">
<div js-tree="ctrl.treeConfig"
should-apply="ctrl.applyModelChanges()"
ng-model="ctrl.treeData"
tree="ctrl.treeInstance"
tree- events="ready:ctrl.onTreeReadyEvent;select_node:ctrl.onNodeSelectEvent;deselect_node:ctrl.onNodeDeselectEvent">
</div>
</div>
</div>
I have a input field where value is equal to the id's and a button. When that button is triggered I want to remove the id in the input field also the button where the value is equal to the data stored in the input field or the id. Here http://jsfiddle.net/leonardeveloper/hcfzL/3/
HTML:
<form id="materialForm" action="#" method="post">
<input id="materials" type="text" name="materials" value="1,2,3" readonly="readonly" disabled="disabled" />
</form>
<div id="display">
<button class="removes" value="1">x</button>
<button class="removes" value="2">x</button>
<button class="removes" value="3">x</button>
</div>
JS:
$(document).on('click', '.removes', function () {
var id = $(this).val();
alert(id);
$('#materials').remove(":contains('" + id + "')");
$('#display').remove(":contains('" + id + "')");
return false;
});
.remove() is for removing DOM elements, not text from values. And it removes the element it's applied to, not elements that are contained within it.
$(document).on('click', '.removes', function () {
var id = $(this).val();
alert(id);
var materials = $('#materials').val().split(',');
materials = materials.filter(function(e) {
return e != id;
});
$('#materials').val(materials.join(','));
$(this).remove();
return false;
});
FIDDLE
The :contains selector is for selecting DOM nodes that contain other DOM nodes. In your case you look to be selecting input elements which have a particular string in their value.
You should probably use .filter to filter to select the input elements that match the filter.
Try
$(document).on('click','.removes',function(){
var id = $(this).val();
$('#materials').val(function(){
var value = this.value, array = value.split(',');
var idx = $.inArray(id, array);
if(idx >=0 ){
array.splice(idx, 1)
value = array.join(',')
}
return value;
})
$(this).remove();
return false;
});
Demo: Fiddle