I have implemented collapsible in my angular application. But those collapsible contents are coming from database service and I am setting those collapsible contents with the help of ngFor as-
<input type="text" name="search" class="form-control" id="myInput" onkeyup="myFAQsSearchFun()" placeholder="Enter your query " >
<div *ngFor="let item of faqs;let i = index;" id="div2">
<button class="accordion" (click)="toggleAccordian($event, i)">
<a style="text-decoration:none;" > {{item.question}}</a>
</button>
<div class="panel" hide="!item.isActive">
<p><br> {{item.answer}} </p>
</div>
<br>
</div>
Collapsible is working fine but the problem is that I want to search those contents based on what I type in search bar. For this I have implemented following code-
function myFAQsSearchFun() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("div2");
li = ul.getElementsByTagName("button");
window.alert(li.length);
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
Window.alert is giving output as "1". But ngFor loops for 3 times as I can see 3 collapsibles.
What I am doing wrong. Pls help.
Thanks in advance!
Instead of using document.getElementById("myInput"), use Angular forms to get input.
You will have the data that you have displayed in HTML available in controller, so instead of looping through DOM, you can just filter the Array in the controller itself.
After filtering, just add a flag for each item in the FAQ to hide or show them.
Add ngIF in the HTML based on the above flag.
HTML :
<input [(ngModel)]="model.search" >
<div *ngFor="let item of faqs;let i = index;" >
<div *ngIf="!item.hidden">
<button class="accordion" (click)="toggleAccordian($event, i)">
<a style="text-decoration:none;" > {{item.question}}</a>
</button>
<div class="panel" hide="!item.isActive">
<p><br> {{item.answer}} </p>
</div>
<br>
</div>
</div>
JS:
model = {search: ''};
faqs = [{question:'asf',answer:'asd'}, {question:'asf',answer:'asd'}]
myFAQsSearchFun() {
var input, filter, ul, li, a, i, txtValue;
input = model.search;
filter = input.toUpperCase();
faqs.forEach((faq) => {
if (faq.question.toUpperCase().indexOf(filter) > -1) {
faq.hidden = false;
} else {
faq.hidden = true;
}
});
}
Related
I´m trying to sort a html list (dropdown menu format that gets filtered as I write something)
dropdown menu list appears when I click on search field
<div class="search-block">
<!--<img class="searchimage" src="https://cdn.glitch.global/4dc88303-8015-467f-9334-2e63fdb63c75/9385963701556258272-16.png?v=1650523566208" alt="search image">-->
<input id="searchbar" type="text" value="" placeholder=" Search" onclick="myFunction();sort()" onkeyup="filterFunction()">
<div id="myDropdown" class="dropdown-content">
<ol id="list1">
<li>New Born</li>
<li>Smash the Cake</li>
<li>Pregnancy</li>
<li>Pre-Wedding</li>
<li>Family</li>
<li>Birthday</li>
<li>Professional</li>
<li>Social Media</li>
</ol>
<!-- TO DO: ADD ITEMS TO THE LIST-->
</div>
<p class="copyright">© 2022 Farias Carril Photography | Designed and built by Daniel Carril</p>
</div>
using JavaScript function.
However, it is not working. What am I missing?
I´m using usual sort algorithm for a simple list
function sort() {
var list, i, switching, shouldSwitch;
div = document.querySelector(".search-block");
a = div.getElementsById("a");
list = document.getElementById("list1");
switching = true;
while (switching)
{
switching = false;
b = list.getElementsByTagName("li");
for (i=0; i<(b.length - 1); i++){
shouldSwitch = false;
if (b[i].innerHTML.toLowerCase() > b[i+1].innerHTML.toLowerCase()){
shouldSwitch = true;
break;
}
}
if (shouldSwitch)
{
b[i].parentNode.insertBefore(b[i+1], b[i]);
switching = true;
}
}
}
I think the first problem is that getElementsById is not a method on the div tag so this causes the script to encounter an error and halt. The second issue is that calling innerHTML on the li tags will return something like New Born, i.e. the result includes the HTML of the a tag inside the li tag. You can change innerHTML to textContent to get the text inside the a tag (alternatively you could grab the a tag and get its innerHTML).
function sort() {
var list, i, switching, shouldSwitch;
div = document.querySelector(".search-block");
// a = div.getElementsById("a");
list = document.getElementById("list1");
switching = true;
while (switching)
{
switching = false;
b = list.getElementsByTagName("li");
for (i=0; i<(b.length - 1); i++){
shouldSwitch = false;
// textContent instead of innerHTML
if (b[i].textContent.toLowerCase() > b[i+1].textContent.toLowerCase()){
shouldSwitch = true;
break;
}
}
if (shouldSwitch)
{
b[i].parentNode.insertBefore(b[i+1], b[i]);
switching = true;
}
}
}
<div class="search-block">
<!--<img class="searchimage" src="https://cdn.glitch.global/4dc88303-8015-467f-9334-2e63fdb63c75/9385963701556258272-16.png?v=1650523566208" alt="search image">-->
<input id="searchbar" type="text" value="" placeholder=" Search" onclick="sort()" onkeyup="">
<div id="myDropdown" class="dropdown-content">
<ol id="list1">
<li>New Born</li>
<li>Smash the Cake</li>
<li>Pregnancy</li>
<li>Pre-Wedding</li>
<li>Family</li>
<li>Birthday</li>
<li>Professional</li>
<li>Social Media</li>
</ol>
<!-- TO DO: ADD ITEMS TO THE LIST-->
</div>
<p class="copyright">© 2022 Farias Carril Photography | Designed and built by Daniel Carril</p>
</div>
innerHTML
textContent
I'm trying to create a to-do list app but i cant seems to append the user data to my list
html:
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button" onclick="newTask()">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
separate javascript file:
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode('inputTask');
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
inputTask is variable containing the text value but you using that as if it is string, remove the quotes around it.
I will also suggest you to avoid inline event handler, you can use addEventListener() instead like the following way:
document.getElementById('add-btn').addEventListener('click', newTask);
function newTask(){
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode(inputTask); //remove quotes here
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
Try like this.
You should call newTask function and append child in it.
const inputTask = document.getElementById('input-task').value;
function newTask(){
var li = document.createElement('li');
var t = document.createTextNode(document.getElementById('input-task').value);
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
document.getElementById('input-task').value="";
}
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button" onclick="newTask()">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
Nothing wrong in your code!
Simple fixed this line
var t = document.createTextNode('inputTask');
Remove ('' quotes)
var t = document.createTextNode(inputTask);
And Final thing I don't know may be you have already done this but I want to mention this
Wrap this code inside the newTask() function
Example: -
function newTask(){
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode(inputTask);
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
I am using below code for slide toggle, it
<div ng-repeat="item in $ctrl.searchitems track by $index">
<div class="quickinfo-overlap"> Content here...
<a class="btn-link" ng-click="$ctrl.quickinfoToggle(item)">quick info</a>
</div>
</div>
And I am using ng-repeat, so it is showing list, I want others list should be close or quickinfo false. so can I do?
This is the controller code:
function listingController($scope) {
var vm = this;
vm.quickinfo = false;
vm.quickinfoToggle = function(event) {
event.quickinfo = !event.quickinfo;
};
};
HTML:
<div ng-repeat="item in $ctrl.searchitems track by $index">
<div class="quickinfo-overlap"> Content here...
<a class="btn-link" ng-click="$ctrl.quickinfoToggle(item,$index)">quick info</a>
</div>
<div>
DIV that needs to be toggled on click
</div>
</div>
Javascript:
function listingController($scope) {
var vm = this;
$scope.toggleList = [];
for(var i=0;i< $scope.searchitems.length;i++)
$scope.toggleList[i] = false;
vm.quickinfoToggle = function(event,index) {
for(var i=0;i< $scope.toggleList.length;i++)
$scope.toggleList[i] = false;
$scope.toggleList[index] = true
event.quickinfo = !event.quickinfo;
};
};
while looping with ng-repeat to show the items, set ng-show:
<div class="quickinfo slide-toggle" ng-show="quickinfo == 1" ng-cloak>
Content here ....
</div>
<a class="btn-link" ng-click="quickinfo = 1">quick info</a>
Of course 1 is not fixed number, it should be unique to each item, like the index or id of the item.
The idea is when clicking the quickinfo link you assigned the clicked item's id not assign true\false to the quickinfo, and in ng-show check if the current id assigned to quickinfo is the same as this item id (or index).
Of course variable names can be changed.
I have a question about popping selection from dropdown off the menu. I have a dropdown that gets dynamically populated with people's names, and I'd like the name selected to pop off the drop down menu and appear in a div next to it. The dropdown menu:
<div class="col-md-4">
<div class="dropdown">
<button style="width: 100%;" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Group Members
<span class="caret"></span></button>
<ul class="dropdown-menu scrollable-menu" role="menu">
{{#each users}}
<li data-uid={{this.u_id}}>{{this.full_name}}</li>
{{/each}}
</ul>
</div>
</div>
And the div I'd like the information (name) to appear:
<div class="col-lg-4">
<h2 class="text-center" style="margin-top: 0;">Selected Group Members</h2>
<ul class="list-unstyled">
<li data-uid={{this.u_id}} class="text-center">{{this.full_name}}</li>
</ul>
</div>
I'm imagining this can be done with some jQuery, which I'm unfortunately not too great at, so I'm not quite sure how to do this. Any help is appreciated!
This should does the work. Please check.
// selected element
var selections = [];
// container that holds selections
var listContainer = $('.container .list-unstyled');
// sorting array of objects by provided field
var sortBy = function (arr, field) {
return arr.sort(function (a, b) {
if (a[field].toLowerCase() < b[field].toLowerCase()) return -1;
if (a[field].toLowerCase() > b[field].toLowerCase()) return 1;
return 0;
});
};
// redraw list on container
var reorder = function(){
listContainer.html('');
for(var i = 0; i < selections.length; i++){
listContainer.append('<li data-uid=' + selections.id + '>' + selections.value + '</li>');
}
}
// list items click handler
$('ul.list-unstyled li').click(function(){
selections.push({
id: $(this).attr('data-uid'),
value: $(this).text()
});
selections = sortBy(selections, 'name');
});
I am making an app, the user can either select an item or use their camera to get the qr code which translates into an item's ID.
The problem is that I think some JQuery is messing with my scope from working properly.
I have to get the QR code by listening to an innerHtml change, once it changes (DOMSubtreeModified) the following occurs.
var index = 0;
$('#result').one('DOMSubtreeModified', function(e) {
var code = "";
if (e.target.innerHTML.length > 0) {
code = e.target.innerHTML;
$scope.ToRun(code);
}
});
$scope.ToRun = function(code) {
for (i = 0; i < $scope.plantList.length; i++) {
if ($scope.plantList[i].plantcode == code) {
index = i;
break;
}
}
$scope.currentPlant = $scope.plantList[index];
$scope.plantDetails = false;
$scope.searchDetails = true;
}
For some reason the following does not have any effect on my ng-classes. As when an item is selected I hide the input dialogs, and show the result one.
$scope.plantDetails = false;
$scope.searchDetails = true;
But when a user selects the item manually it works just perfectly. (the items have an ng-click on it)
$scope.viewPlant = function(plant) {
$scope.currentPlant = plant
$scope.plantDetails = false;
$scope.searchDetails = true;
};
And the above works fine, with the ng-click. So why won't my new function that listens for an innerHtml change work?
HTML snippet
<div ng-class="{ 'hidden': searchDetails }">
<!-- CHOOSE INPUT TYPE -->
<div class="form-group" style="margin-bottom:0px">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = false; qr = true">Plant Code</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = true; qr = false">QR Code</button>
</div>
</div>
</div>
<br />
<!-- QR CODE INPUT -->
<div ng-class="{ 'hidden': qr }">
<img id="blah" src="./images/placeholder.png" />
<span class="btn btn-default btn-file">
<i class="glyphicon glyphicon-camera"></i>
<input type="file" onchange="readURL(this);handleFiles(this.files)">
</span>
<div id="result">xxxxxx</div>
<canvas id="qr-canvas" width="800" height="600"></canvas>
</div>
<!-- MANUAL SELECTION INPUT -->
<div ng-class="{ 'hidden': digits }">
<input ng-model="search.$" style="width:100%; font-size:30px; text-align:center" placeholder="Plant Code" />
<div style="overflow: auto; max-height:250px">
<table class="table table-striped" style="background-color:lightblue">
<tr ng-repeat="plant in plantList | filter:search" ng-click="viewPlant(plant)" style="cursor:pointer">
<th>{{plant.name}}</th>
<th>{{plant.plantcode}}</th>
</tr>
</table>
</div>
</div>
<div>
</div>
</div>
<div ng-class="{ 'hidden': plantDetails }">
// results - this should appear when one of the above is entered.
// works for manual selection, but not qr code
</div>
Just confused on why my QR input will not fire off the change-class options to hide the searchDetails div and show the plantDetails div
EDIT: Doing a small test, it seems that my class variables are indeed not updating at all. I just put the values at the bottom of my page and they do not update when hitting the block of:
$scope.plantDetails = false;
$scope.searchDetails = true;
You need to let Angular know about the change. Add this at the end of your method and let me know if it works.
$scope.$apply();