Angular4 NgFor select box with a large array - javascript

I'm working on a project in which I would like to populate a selectbox with all the cities of a certain country. The array I get from my db is about 2800 records long. When Angular renders this selectbox it takes pretty long although the data is ready for rendering very fast.
Here is my html code:
<div class="form-group">
<label for="city">City</label>
<select type="text" id="city" class="form-control" ngModel name="city" required [ngModel]="user?.city.zipcode">
<option *ngFor="let city of cities" value="{{city.zipcode}}">{{city.cityName}}</option>
</select>
</div>
I tried to get it to speed up using virtual scrolling but I'm not finding very good examples in how to use this with selectboxes and this also doesn't fix the rendering lag caused by the 2-way binding. Does anyone have a solution for this which I can follow. I'm still a junior in Angular so any help is more than welcome.
Thanks for you're time and effort in advance!

Related

duplicate div containing set of fields in the same dom

i am loading handlebar templates in the two div locations(like add and edit tabs both are jsps) from the same page. so i have duplicate elements in the DOM object, since it is a template which is coming from server location. you can see the sample code below
<div id="add">
<div id="exploding">
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
...
</div>
</div>
<div id="edit">
<div id="exploding">
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
...
</div>
</div>
I can't modify the div container ids i.e exploding since some javascript functions attached to it based on that id to explode address field.
here the problem is if i made any changes to the edit tab, address "exploding" div, it is effecting in add tab address "exploding" since ids are repeated. i have tried jquery detach method to remove the dom elements, but didn't get proper result. Its a web application based on spring boot.
is there any possibility to load jsps dynamically through jquery, i have tried load method as well, but the call is going through controller. I didn't feel it as better option.
Thanks & Regards
krishna K

Create JSON on HTML basis and vice-versa

I have hierarchical structure of <select>/<input> based elements, which can be formed into (logical) groups. In other words, i have logical-tree where every node represented by (three) <select>/<input>.
Here is how HTML looks like (all extra elements like buttons deleted):
<div class="conditions-group logical-or">
<div class="conditions">
<div class="conditions-group logical-and">
<div class="conditions">
<div class="condition row">
<div class="metric">
<select class="form-control"></select>
</div>
<div class="operator">
<select class="form-control "></select>
</div>
<div class="value">
<input value="" class="form-control">
</div>
</div>
<div class="condition row">
<div class="metric">
<select class="form-control"></select>
</div>
<div class="operator">
<select class="form-control "></select>
</div>
<div class="value">
<input value="" class="form-control">
</div>
</div>
</div>
<div class="condition row">
<div class="metric">
<select class="form-control"></select>
</div>
<div class="operator">
<select class="form-control "></select>
</div>
<div class="value">
<input value="" class="form-control">
</div>
</div>
</div>
</div>
My aplication is C# ASP-NET MVC. I use bootstrap to make this looking good. And i have some JS-logic for creating this by user. This HTML-code is just example that created by me.
I need to store this structre and be able to build HTML back from stored data (so user can comeback and see his structure).
So i understood that i need to use JSON to store.
Here is my questions:
What is the better way to achive my goal? I need use some JS-library, right? Could you please make my clear practical advice what to use in this case and why.
You don't have to use JSON, but you do need to serialize it somehow. JSON can be a fairly clean method.
There are some libraries out there that will do this, but at a cursory glance, none of them seemed super well supported, so you might want to avoid.
In this case, it seems fairly straight and I would probably go with a more direct approach which you do it more or less by hand.
Starting with, since it looks like you have metric, operator, and value in each, I would start with those in your object:
{
rows: [
{ metric: 'someValue', operator: 'someValue', value: 'someValue' },
// .. more as necessary
]
}
I would build the object as a POJO (plain old JavaScript object) and then use JSON.stringify() to convert it to JSON.
With your data, you could basically just loop through and output your HTML:
function render(rows) {
rows.forEach(({ metric, operator, value }) => {
// create elements based on these value
});
}
For saving the data, there are two approaches:
parse the HTML and turn it into a JSON object after the fact
keep the data as an object, update it, and then re-render the page based off of it
I prefer the second method. Instead of making HTML directly, have one data object and when you make changes, update that object and just call your render() method to re-render. This means you don't have to parse the HTML when you go to save.
It will also simplify the tool you mentioned to allow uses to add this, as all it'll have to do instead is rows.push({ metric: 'defaultValue', operator: 'defaultValue', value: 'defaultValue' }).
The only other thing is to add an onChange() to each input. When they change, figure out which row it is (get the .row parent and figure out what index it is relative to its siblings, that'll be the same index for the rows object) and field (just get the class name) and then just update the appropriate value.
This kind of render-based-off-data is also what libraries like React, Angular and Vue do. Depending on your project, you may consider leveraging one of them to help with things as well (though if the project is small, its perfectly doable without).

AngularJS 1. Trying to implement a checkbox beside field-names being written in

The code you see below works 100% but the problem is I am trying to implement a checkbox list into the single-page application. I am new to angular
<select size="10" class="form-control" name="brandSelector"
multiple="multiple" ng-model="brandGroup.brand_ids" ng-options="b._id as ''
+ b.name+' - '+b.division_name for b in brands">.
I tried finding a solution on the internet and found this block of code but that is just writing in the name, the other piece of code above pulls data in from somewhere. How do I implement a checkbox without hassle? Thank you
<div>
<input type="checkbox" name="brandSelector" value="">
<label> Ted Baker Kids - Hudson</label></div>

Data not binding properly in angular in list box

I am using the below to code to get data in a list box.
<div class="form-group">
<label class="control-label col-md-6">Year Built</label>
<div class="col-md-6">
<select ng-model="property.yearBuilt"
id="yearBuilt"
rb-default-year="currentYear"
ng-options="year.yearFourDigit as year.yearFourDigit for year in years">
<option value="">--Select--</option>
</select>
</div>
</div>
But somoehow the data is not binding properly with html. I am getting blank list box 50% of the times.
Can anyone please help me in this?
I wanted to post a picture showing what I am seeing, but I don't have a 10 in reputation to be able to do that.

AngularJS Typeahead To Always Show

I am using the AngularJS typeahead directive to iterate over an array of objects which has been populated before-hand by an API, so that the typeahead is pulling all information from memory.
I would like that when the input gains focus, the typeahead is shown with all available results, even when there is no value in the input.
I found this simple JSFiddle for a typeahead that we can use to test with.
I've tried using:
<input typeahead-min-length="0" class="form-control input-sm" ng-model="query" typeahead="warehouse.info for warehouse in warehouses | filter:$viewValue" typeahead-on-select="selectedWarehouse = $item;" ng-keypress="fetchWarehouses();"/>
..thinking that the attribute typeahead-min-length="0" could accomplish this, but it didn't.
Any ideas? Thanks!

Categories

Resources