I am trying to find a smart way to create a multi-level decision tree selector in angularjs. So, basically what I am looking for is:
If I select Maingroup "GroupA" from a dropdown list, than I should only see the properties from subgroup1 related to GroupA. The subgroup1 should be also a dropdownlist. Then, refining the selection by another dropdownlist, should display only the possible selections based on Maingroup+Subgroup1.
Finally, the value should be displayed.
[{"Maingroup":"GroupA","Subgroup1":"subgroupA1","Subgroup2":"subgroupA21","Value":11.34},
{"Maingroup":"GroupA","Subgroup1":"subgroupA1","Subgroup2":"subgroupA22","Value":40.7},
{"Maingroup":"GroupA","Subgroup1":"subgroupA2","Subgroup2":"subgroupA23","Value":58.23},
{"Maingroup":"GroupA","Subgroup1":"subgroupA2","Subgroup2":"subgroupA24","Value":20.64},
{"Maingroup":"GroupA","Subgroup1":"subgroupA2","Subgroup2":"subgroupA25","Value":74.77},
I have put a screenshot and the json file on github.
Thanks, any suggestion is welcome.
Take a look at angular-ui-tree connected trees demo. The structure can be reused to achieve your goals.
Related
Could anyone suggest me some tutorials or some suggestion how to perform the search function using multiple popover filter button. (instead of typing input , click on the filter buttons)?
Some think quick and easy to start to take a look and use filter and sort functions for example in a Table component could be this specific component in Ant design library`: https://ant.design/components/table/#components-table-demo-head
If you plan to implement the filter and sorter (a query to a collection of data) logic in the front-end and you plan to have multiples filters applayed at the same time you can take a look of this library: https://github.com/crcn/sift.js
If you plan to resolve the all this problems (render data, filter, pagination, sort, ...) on the server side to support lazy loding I advice you to take a look to:https://github.com/react-tools/react-table
I hope that this can help you
I've 3 jsons files linked with 3 controllers, and I need to search on them using ionic/angularjs. I would like the results appear as dropdown menu, like Facebook search or like here in Stackoverflow.
Thank you.
So there are two things here that you want to do:
Be able to search inside JSON file, I think you can do that, there is a SO thread for same : Angular Search for value in JSON and display corresponding data
Display an Auto-complete drop-down, I think there bunch of directives out there, like: https://www.versioneye.com/javascript/sn0opr:ionic-autocomplete/0.1
You can also check following Ionic forum thread for type ahead recommendation:
https://forum.ionicframework.com/t/recomendation-for-a-typeahead-widget/55
If you want to create your own have look at following tutorial:
http://www.sitepoint.com/creating-a-typeahead-widget-with-angularjs/
I've been looking at using Angular Schema Form to define all my forms for my project but one thing that stood out to me massively is that when we define a select/drop-down element, the values have to be specified then and there in the JSON. This doesn't strike me as very flexible as I want these values to be retrieved from my Angular controller/factory as they are currently available on the scope.
I've done quite a bit of searching on how to get round this but haven't found a definitive solution or anything that worked for me so I decided to try to extend the Select myself and add a mapping to the schemaFormDecoratorsProvider.
I have followed the documentation for Extending Schema Form, and now have an HTML snippet which defines my Select control and this is being rendered when I define it in my JSON schema. What I want to be able to do is to specify the ng-options attribute either in part as a whole via the JSON schema. I have tried to do this but nothing seems to result in the select options being rendered.
Here is part of my select control:
<select ng-model="$$value$$"
ng-model-options="form.ngModelOptions"
sf-changed="form"
schema-validate="form"
ng-options="item.value as item.name for item in form.titleMap"
ng-disabled="form.readonly">
</select>
Where ng-options is defined, I want to be able to either specify titleMap in my JSON and it be resolved to an object on my scope or I can pass the name of the collection in my JSON and then pass that in where form.titleMap currently sits.
Anybody had any experience doing this? To me is seems like a fairly reasonable requirement but can't find much help on the web about it.
Many thanks.
There are add-ons designed to support dynamic data selection, the library has no preference and leaves it up to the developer to select the most appropriate for their needs, however I built the Material Design decorator to include the capabilities of angular-schema-form-external-options in the decorator so the add-on is not needed. The bootstrap decorator does not have this capability at this stage.
The angular-schema-form-external-options library is basic but covers most requirements for simple dynamic drop down data population
The angular-schema-form-dynamic-select is a more robust and feature full option with a variety of configurable options.
I am looking at a different way of doing my application.
Actually It's kind of static. My Projects have Categories. Each Category has Subcategories. Categories are containers and Subcategories are element which have values that can be edited.
After analysis of the data , we saw that it was not enough general for it. We are now looking at a Tree Structure. Doing so, we would have Projects filled with Folders/Categories) and those Folders would be filled with other Category/Folders or with SubCategories/Items/Files. That way we can go has deep has we want in complexity.
That is doable, I know it. What I need to know is how hard it will be to implement it in the app.views...
Is it possible to have a single Ext.DataView.dataview display different Ext.DataView.component.DataItem side by side.
Exemple : Having a row in my List that shows a slider and update itself according to it, but that on the 2nd row it is an arrow that on click would open the next level of my Tree.
Visual:
DataView_List
Small Car---------------------------Label------------------------SLIDER
Fuel----------------------------------Label------------------------------ >
SUV----------------------------------Label------------------------TxtField
Small Car and SUV are leaves with different template and Fuel is a category/folder that need to open on click.
So I already have 3 differents templates that would need to show in the same dataview list.
How should I proceed to achieve such results? Is Dataview List the way to good or should I implement my own kind of list inside a container?
If you want to present different kinds of data inside one list or dataview - you can achieve by following strategy:
You still need to use one store to keep it all
In the model class include something like 'record_type' field indicating what kind of data you have
Combine all data you need into one model
Create a template that based on the 'record_type' would render different content
Here is how your template would look like:
<tpl switch="record_type">
<tpl case="car">
<div>CAR + SLIDER</div>
<tpl case="fuel">
<div>FUEL + LABEL</div>
<tpl default">
</tpl>
This is screenshot from my list which contains multiple record types and uses this approach:
here is the example edited by crop grid:
1st i view like a normal grid like this image
http://imageshack.us/f/836/groupcontrollingb4.png/
then i create a check box name as "Cuisine:American" and check it to reload become image like this
http://imageshack.us/f/803/gridcontrollingafter.png/
the group data "Cuisine:American" can be group it and expand
then other data still remain the normal grid view
Does any one know a example or possibility for controlling the groupView like in the example i've shown ?
Hope u all can understand my question
thankz.
It's harder than it should be, because ext is not calling Ext.util.Grouper.getGroupString method. I've managed to bypass this. Here is working sample: http://jsfiddle.net/bP7Y2/
I am basing on Grouped Grid Example from Ext JS site. I've created CuisineGrouper which is extending Ext.util.Grouper. There are 2 important methods: getGroupString which returns gruping string and sorterFn which sorts in that way that grupped elements are on the top. For example when there is grouping by 'Cuisine:American' getGroupString returns 'American' or '' depending on cuisine value.
Another important bit is overriden getGroupString method on Restaurants store, so now it calls Ext.util.Grouper.getGroupString.
Last thing I've modified is groupHeaderTpl of groupingFeature.
(Update) It's possible to hide Others grouping header with some hacks. Example: http://jsfiddle.net/bP7Y2/1/