The Most Active and Friendliest
Affiliate Marketing Community Online!

“Propeller”/  Direct Affiliate

Urgent! Solution needed with AngularJS NG Model

  • Thread starter Vivienne Cazarez
  • Start date
V

Vivienne Cazarez

Guest
I am working with form select. Which is containing 2-way binding via a model ngModel to a handle the selected object? After that 'option' is simply created using *ngFor for a list of similar objects presented (these are properly differentiated by simple id). I have mentioned that AngularJs is using JS object in the form of an equivalent of instances. So, there will be no matching, if the instances are not same in the list. There is not clear 'selected' option. This is clearly breaking 2-way binding of a data array.

My idea is to do the matching without depending on the instances. I have implemented multiple solutions from Google search but all of those solutions are either completely wrong or have a little piece of the program missing.

Following are the solutions, I am trying to avoid.
  • Use the bind method for simple binding. ngValue is offering great help, and I really want to utilize this.
  • Workarounds through change handlers
  • Change handlers
Do something with the instance, so that it will easily get matched. This is a good option, as I only have to get little information and processing for the matching. The objects are coming from a data service. But, I don't want to redefine everything to get the match and it is a waste of time.

Ideally, I have seen many solutions but none of those are working, I am thinking about having ngModel which will replace the object instance model.

I am mentioning my latest implementation. I am using huristic.id == alt.id, this is the defining the 'selected' attributes. I can't understand why is it not rendered. Possibly ngModel is blocking it? I am getting selected = 'true'. This will automatically fix the HTML issue. But using attr.selected or any other, by setting ng-reflect-selected = 'true' is not resulting in the correct solution.

HTML:
<div *ngFor='let a of worker.Worklist; let i=index; trackBy:alt?.id'>

    <label for='Worklist'>work:</label>
    <select id='Worklist' class='form-control'
        name='Worklist' [(ngModel)]='worker.Worklist[i]' #name='ngModel'>

        <option *ngFor='let huristic of tasksnumbers; trackBy:huristic?.id'
            [ngValue]='huristic'
            [attr.selected]='huristic.id == alt.id ? true : null'
        >
        {{huristic.name}}
        </option>
    </select>
</div>
I have used the track by and also selected with the empty list. I have successfully done the HTML rendering in following way;

Code:
<select ...>
    <option selected='true'>SOptions</option>
    <option selected='false'>NOptions</option>
    <!-- These are the different variants with selected=null-->
</select>

I can't get any selected value by now, as the object instance is totally different compared with standard implementation (discussed above). Also, which one is saving the value of selected value, whenever the user is trying to select an option ( I want to know, how ngModel handle the issue and what are the other alternatives).

Another issue, which I am getting is with some simple maps api implementation. Right now, I need multiple maps on the location pages.

I have implemented 1 map on all the pages (blog, directory, information, contact information). But, in order to implement the other one. I have to insert the zoomed code after the images, article, and ads and before the reviews and comments section. This map, which is a zoomed-in version of the location is having pixelation issues only on windows phone. Also, I have to implement an interactive solution for the page. As you can see from Expected USAA Military Salary Payment Dates - Militarybases.co, I am only is one dive and using one parent 'linear layout' in vertical direction, you can see every container is part of the second container. Client is saying, he need an interactive way for the design, so that visitors would not have to scroll down to see the features on the page. Also, I have removed the ugly map. Please have a look at the JavaScript and let me know, what part of the code is causing the pixel problem.
 
Last edited by a moderator:
Hi, @Vivienne Cazarez .

I can't help you with this but I noticed your thread and wanted to give it a bump, so those that can help you will see it. We get a ton of new posts, so I think it got buried pretty quickly.

Let's see if we can get you some help!
 
Can you tell Me exactly what you code wants to do for you ?
do you want to get selected value from <select></select> In Html and bind it Some Where else In your page ?
by the way am not a fan of angular, But am trying to help
 
MI
Back