I am displaying data from an array in different panels and the user has the option to remove panels from the view and the removed panels are populated in a dropdown menu. The user will have the flexibility to select multiple panel titles to repopulate the page with the selected panels.
Currently i am able to remove panels - push them to a new array and populate the dropdown with removed panel titles from the array.
I am using bootstrap and angular - At this moment i am having trouble displaying the dropdown menu properly as it should and not sure what is wrong.... Here is my html for dropdown:
<select multiple>
<option *ngFor="let item of dropdownlist">{{item.title}}</option>
</select>
This is just showing as an empty rectangle and when i remove a panel the title shows up in the dropdown but it seems like it is missing styling
This is how i would like it to look:
Also this is how i am removing and adding panel to an array:
<a title="Remove Panel" (click)="removePanel(i);">
<i class="glyphicon glyphicon-remove"></i>
</a>
removePanel(index: number): void {
this.dropdownlist.push(new Object(this.items.splice(index, 1)[0]));
}
dropdownlist: Array<any> = [];
items: Array<Panel> = [
new Panel(1, 'panel 1', 'show text', 'test data in modal'),
new Panel(2, 'panel 2','show image', 'more test data'),
new Panel(3, 'panel 3', 'show graph', 'more and more data')
];
I am also not sure how my add function will look from dropdown to items and will be the opposite of my removePanel function?
This not your question's answer but I recommend you using select2
Another option would be to use the Bootstrap multiple select plugin, here is a link to the demo:
http://davidstutz.github.io/bootstrap-multiselect/
And here is the github repo:
https://github.com/davidstutz/bootstrap-multiselect
It's pretty good and I recommend it, it also gives you more options if you decide to configure it again later, and because you'll have already included it in the project you can use this anywhere you need it.
I don't think you'll be able to achieve this naturally and without using a plugin.
Related
Assume that I have a hierarchy of categories/subcategories such as:
Books
Fiction
Cooking
Seafood
Pizza
IT
HTML
JavaScript
ReactJS
NodeJS
As you have noticed, we have an unknown depth of categories where ReactJS have a depth of 3, but Fiction have a depth of 1
I am trying to create a form that includes a dropdown menu of root categories (Books, Clothes, Candies, ...etc). Whenever the user clicks on a root category (assume it is Books). Another dropdown will appear with the subcategories (Fiction, Cooking and IT). After that, when the user clicks on IT, another dropdown menu will appear below which will be HTML and JavaScript. Finally, when the user clicks on JavaScript, the final dropdown menu will appear which will contain ReactJS and NodeJS.
Please note that:
The user can choose any level and procceed. I mean he can choose Books and submit the form, or click NodeJS and submit the form.
I want to give the user the ability to rollback. I mean that maybe the user clicks on Books > IT > HTML > JavaScript > NodeJS. He can go to the second dropdown menu (Fiction, Cooking and IT), and then choose Cooking. In this case, all the drop menus below the second dropdown menu will be deleted and we will have a new drop menu which contains Seafood and Pizza.
When we submit the form, only the final dropdown menu value will be sent to the server.
I am not that strong in Frontend, I have already built and tested the Backend which receives the category/subcategory id and then returns all of the subcategories underneath it.
My questions are:
Is my approach good? (You can suggest better approaches)
If my approach is good, how to implement it in Vanilla JavaScript?
Here is a minimal code:
<div id="myDiv">
<select name="category">
<option value="">Please select a category...</option>
<!-- Some for-loop that is getting the main categories successfully -->
</select>
</div>
<script>
const request = new Request(
'Here is the URL to the controller that already gives me the subcategories successfully', {
method: 'POST',
body: JSON.stringify({parent: 1}), // 1 is the id of the parent category that we want to get its subcategories
}
);
fetch(request).then(function (response) {
return response.json();
}).then(function (json) {
for (const i in json) {
console.log(json[i]['name']); // This line prints the subcategories names successfully
}
});
</script>
It is not necessarily to give me the full code, I only need some guidelines.
So, I'm building a softare using electron. Now I can add menu in the software from a template
var menu = Menu.buildFromTemplate([
{
label: 'Menu',
submenu: [
{label:'open'},
{label:'save'},
{label:'Exit'}
]
}
])
Menu.setApplicationMenu(menu);
But how do I modify a single menu item. For example, say, the save menu is disabled by default and activated after the open is clicked. Also say after clicking open a new menu edit appears. I can create the complete new template in full and just change the previous template with the new. But thats a bad way and can't be a practical solution when I'm using several menus with several submenus. So can I modify just one single menu item of my choice?
You can get the menu items using:
import { Menu } from 'electron';
Menu.getApplicationMenu().items // all the items
Menu.getApplicationMenu().getMenuItemById('MENU_ITEM_ID') // get a single item by its id
After that you have several properties on the single menu item as:
- checked
- enabled
- visible
- label
- click
And you can customize your behavior as you want to.
Tested with electron 3.0.5, before the 27 Sep 2017 the method getMenuItemById was not there and you had to loop over all the items.
I am working with an app that has an ng-repeat that populates a navigation sidebar with a list of items from a Mongo DB. The ng-repeat also populates a series of option buttons for each item. A couple of these option buttons share a dynamic id for each iteration in the ng-repeat. What should be happening here is when I click on one of these buttons, it would change the button 'text' and display some additional options under the menu item and toggle back when clicked again.
Here is my code for these buttons:
<span>
<button ng-hide="highlightItem()" ng-click="showTopic()" ng-attr-id="{{ 'category' + subject._id }}" class="add-button"><i class="fa fa-chevron-down"></i></button>
<button ng-click="hideTopic()" ng-show="highlightItem()" ng-attr-id="{{ 'category' + subject._id }}" class="add-button"><i class="fa fa-chevron-up"></i></button>
</span>
The issue that I am having is that I cannot seem to figure out how to access that dynamic id in my controller. I have code in place that will change the button between the ng-show and ng-hide, but it does it for all iterations of ng-repeat.
This is currently how I am attempting to access the dynamic id. I am not getting any errors, but when I try to use this in my function it doesn't work.
$scope.subjectList = subjects.get({});
var topicButton = document.getElementById('topic' + $scope.subjectList._id);
I have also tried
var topicButton = document.getElementById('topic' + $scope.subject._id);
What is the best way to access the dynamic id in Angular/Javascript? I do not want to use jQuery with this if at all possible.
First and foremost, never manipulate the DOM within an angular controller! It is bad practice. Also, it is bad practice to evaluate methods in ngShow/ngHide.
If I understand you correctly, you're trying to get the subject_id for some reason when the button is clicked. Why can't you just pass back either the id or the entire subject to your method? Then your html would look something like this:
<span>
<button ngClick="toggleTopic(subject)" class="add-button">
<i class="fa" ng-class="{'fa-caret-down': subject.hidden, 'fa-caret-up': !subject.hidden}"></i>
</button>
</span>
Then in your controller you could write something like this:
$scope.toggleTopic = function(subject) {
subject.hidden = !subject.hidden;
};
Using the hidden attribute of your subjects, you can now show or hide elements of your dropdown with ngShow/ngHide like so:
<p ng-bind="subject.descripton" ng-hide="subject.hidden"></p>
This way, you don't have to search the DOM for elements at all.
I'm having a strange issue I can't seem to troubleshoot with my view. I'm using a directive that generates a treeview of my website. When I select one site, I have two select boxes which populate with the groups in one site and the lists in the site. When the options populate, they are all selected. I've inspected elements and they all have option="selected" Stranger is that, when I click on a single option, all others disappear and only the selected option remains. I've checked the source in Chrome console and yea only the selected option tag remains.
For exmaple the Site Lists select box has multiple options but when I clicked on Old documents, they others all disappeared. In the Site Groups, all groups are already selected
Ctrl:
spApp.controller('sitesCtrl',
function sitesCtrl($scope, $q, $modal, UserService, GroupService, SiteService){
//Options for tree controller directive
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
//Returns siteMap for tree controller directive
$scope.siteMap = SiteService.getSiteMap();
//Returns selected sites information: grous, lists, title, url
$scope.showSelected = function(site){
var siteData = SiteService.getSiteInfo(site);
//sets sites title and url in view
$scope.site = site;
$scope.siteGroups = siteData.groups;
$scope.siteLists = siteData.lists;
}
}
);
View:
<div class="siteGroups">
<label for="siteGroups">Site Groups</label>
<select
multiple
name="siteGroups"
id="siteGroups"
class="siteGroups"
ng-model="siteGroups"
ng-options="g.name for g in siteGroups">
</select>
</div>
<div class="btm1 animated fadeInUp">
<label for="siteLists">Site Lists </label>
<select multiple
id="siteLists"
ng-model="siteLists"
ng-options="l.title for l in siteLists">
</select>
</div>
Service and more of the view
This is happening because the ngOptions in the select lists are bounded to the same array as the ngModel. ngModel needs to be a different array that holds only the selected values.
With siteGroups as an example, what is happening is that the select list options are initialized with siteGroups, and they are all selected because the items are in the ngModel (also the siteGroups array). When you click on one of them, it now removes all other items from ngModel except the one you clicked on. Since ngOptions is bounded to the same list, all the non selected options disappear too.
To fix this, create separate array properties on your scope for the selected values in each list.
I have a form containing a select field id="projects" which upon being changed shows a hidden select field 'task' dynamically populating the tasks for the selected project by querying the dB. User can then enter hours which are updated on proj_id,task_id combination from the selects. Following code shows the 'task' select when 'Projects' is changed.
$('.tasks').hide();
$('#projects').change(function(){
$('.tasks').show();
$('.tasks').append("<option>1</option><option>New Task</option>");
});
I then added the functionality of clicking a button that replicates the form, each row contains 1.select 'project' 2. hidden select 'task' shown on project select 3. hidden textbox activated when New Task option is selected 4. hour input boxes for the whole week.
$('#add').click(function () {
$('#row').clone().appendTo('#dynform');
});
The functionality needed is that each user be able to add rows and choose different project-task combinations to log hours against them.
The problem here is that when I change the first rows projects all the added rows get affected too, I am not able to seperate them out. I am new to dynamically changing things in a web-page. Please help me out.
Working Fiddle of the whole thing - http://jsfiddle.net/PuWMK/1/
You may try this
$('.tasks').hide();
$('#dynform').on('change' , '#projects', function(){
$(this).next('.tasks').show()
.append("<option>1</option><option>New Task</option>")
});
$('#add').click(function () {
$('#row').clone().appendTo('#dynform');
});
$('.tasks').change(function(){
$('#new').css('visibility','visible');
});
DEMO.