Angular.js: Input class not changing / pre-populating data as expected - javascript

I have the following structure:
I have a list which is filled from JS (100% verified the the list is being filled and no data is missing).
In Angular's HTML, I go over the list with ng-repeat:
<div ng-repeat="attr in x.list track by $index">
Basically, the list is filled out of a JSON file containing FE elements data.
So, in each iteration of the Angular loop, I check what is the type of the element and have it as input.
One of the types is a textbox, and it should be pre-populated with data.
So if the type is a textbox, I fill it according to the following:
<input ng-if="attr.type=== 'textbox'"
name= etc
class=etc
id=etc
ng-minlength= etc
ng-pattern= etc
ng-maxlength= etc
ng-model= etc
value= etc
ng-init= etc
placeholder= etc
mdn-input= etc
ng-paste= etc
ng-required= etc
ng-disabled= etc
To explain it further, the loop fills all of the elements. For the user, there is a dropdown, and once he chooses anything, the Front End page loads the elements accordingly.
The issue is: When the page loads, the pre-populated data are loaded correctly. However when the user changes the option in Dropdown, the pre-populated data is sometimes NOT ALL loaded! So for example only 2 textboxes out of 4 is loaded.
Any ideas?
Thank you.

Related

Dynamic JSP input boxes?

How can I create a JSP page with dynamic selection/input boxes?
The first one will show all table names:
<select name="table">
<option value="" disabled selected>Tabela</option>
<% while(rset.next()){ %>
<option font color="black" value="<%= rset.getString(1)%>"> <%=rset.getString(1)%>
</option>
<% } %>;
<%TableDAO.closeConnection();%>
</select><br>
this part is working good, in the start of the page Im getting rset to have a result set from a search that return table names.
So, I have the first selection box, user will pick the Table in which he wants to add a new entry. When the user picks a table name from that selection box, I want the program to create X input boxes below, being X the number of columns from that table, each one with the column's name as placeholder.
Is this possible? JSP is always processed before display right? how could I do this dynamic part, Js? Could someone give me some samples?
Display a page with the first selection box
User picks an option
User submits the form
JSP receives the data
Use that data to query the database
Use that data to display a second page with the next set of inputs on it
If you want to avoid loading entire new pages then you'll need to write an API using your JSP (generally speaking, people follow the RESTful pattern and return JSON these days). Then you can use JavaScript to make HTTP requests (i.e. Ajax) to that API.

Removing last ng-form from validation in angularjs

I have a master detail form in angularjs. The form is typical transactions form with some master data like Name, type etc. The detail part contains many lines (can be added and deleted). Each line has input fields for Credit, Debit and Account Number. I have been able to add the required validations both on master portion of the form and detailed portion as well using ng-form directive. My form looks like following
you can see that I already have Add Row button that will add row on detail portion. Now I have strange requirement that is to add a row automatically when user is entering data in last row. I have even done that using ng-focus directive but the next part of requirement is to remove the last row from validation context if it is not used (not dirty) and successfully submit the remaining form. How can I do it in angular. Please find the Code on Plunkr and guide me how I can remove last row of detailed portion from validation context if it is not dirty.
ngRepeat sets $last to true for the last row. So you can just disable ng-require if an input is on the last row.
You could do something like data-ng-required="!entry.DebitAmoun && !$last" and similar for each input.
The above will work if you assume that last row always contains empty input fields. Whenever the user adds any value on the last row, then a new row is created.

Multi Dropdown JSON Filter Search AngularJS

I am new to AngularJS and writing an AngularJS application with four drop down (select) acting as the search criteria to filter the search result.
Each drop down is populated by a field from the search result.
Though, some of the dropdown fields are not displayed in the search result.
The expected logic is as follows:
1.On page load, you display the 4 dropdown and underneath the unfiltered results say, 10 rows
2.On change of dropdown A, the associated filter is applied to the JSON result and result is refreshed and automatically displayed
3.The last selected dropdown option is retained each time
4.On change of dropdown B, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
5.On change of dropdown D, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
6.On change of dropdown C, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
So, the dropdown can be selected in any order and there is a cummulative filtering
Also, if no result is returned by filter combination, a message is displayed.
I have a solution for one drop down, but cannot implement multiple drop down filter on same json data.
My solution was based on the following filter data using dropdown?, which as a plunker.
Any help will be very much appreciated.
You can pass an Object as the parameter to your filter expression, as described in the API Reference here http://docs.angularjs.org/api/ng.filter%3afilter. This object can selectively apply the properties you're interested in, like so:
<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">
Here's a Plunker : http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview
The plunker works for input tags, hence it will also work for select tags with few modifications.
Disclaimer : Plunker Not Created By Me

AngularJS - Binding the model to inputs that were not created with ng-repeat

I have the following ui scenario:
Need to create a ui with three inputs to allow the user to enter his/her favorite movies. Those inputs will be always three except that they were populated previously, or except that the user uploaded three movies and he/she is coming back to see the list.
So:
Case 1: The user doesn't have any data stored. So there should be three inputs, not generated with hg-repeat, but bounded to the model.
Case 2: The user has less than two (out three) movies loaded. Two inputs can be generated with hg-repeat, but the last one it must be shown.
Case 3: The user has three inputs filled, the ui must generate a four -empty- blank input to allow the user to continue adding his/her favorite movies.
Which is the best approach with angular to achieve this?
Thanks so much in advance,
Guillermo
In each case, you should use a ng-repeat. And I would do something like this :
create an object to store the value
movies={movie1:undefined, movie2:undefined, movie3undefined}
Pre-fill this object with user loaded movies if any
create your ng-repeat
<li ng-repeat='movie in movies'> with you input binded to movies : <input ng-model='movies[movie]'>
You can also create a last li item with a ng-if testing if the 3 values are filled and then adding a fourth input.

Auto Complete Fields in Rails that Display Something Different Than What They Select

I'm trying to create an auto complete field (using the script.aculo.us plugin) in a form for a category select, but I want the auto complete list to display a number next to each category (the number of other things in the same category). This is similar to the Tags field on stack overflow.
Right now I can display the number I want, but when I select any field the extra number gets dumped into the text field with the category. Currently I'm simply appending the number to each item on the array before I display it. How can I make it so when you select something from the list the number (enclosed in parentheses) does not get put into the text field. Thank you.
I finally solved my problem, I just needed to figure out what some of the plugin's options were. It turns out there is an option for the auto_complete_field helper called :select. The value you provide to this tells the JavaScript which part of the <li> element (the HTML tags the results are displayed in) to return to the text box.
The solution was a simple matter of enclosing the name of the category in a span with a special class and leaving the number part I didn't want outside of this class. This was easy since I was already using my own partial to display the results.

Categories