I'm learning Angular. I've created a datepicker from the scratch (*why from the scratch is a different story). As you can see I've two date-picker custom component in the same widget. The code is same for both. I just copied and pasted in the same HTML file.
Here is my monthpicker.component.html
Note: dls is our own library of basic html components like textfields etc. Please Ignore that.
....
<div class="dropdown">
<span>
<dls-textbox id="upper">
<input dlsInput [ngModel]="text" placeholder="...">
</dls-textbox>
</span>
<div class="my-table-div dropdown-content">
<div class="year-div">
<input type="number" [(ngModel)]="year" value="2019" min="2018" max="2024">
</div>
<br>
<div *ngFor="..." class="my-table">
<span *ngFor="...">
<span class="month-name" (click)="onClick(x);">
{{ x.monthName }}
</span>
</span>
</div>
</div>
<!-- A TOGGLE SWITCH GOES HERE-->
<!-- THEN SAME DATE PICKER CODE I COPIED BELOW-->
<div class="dropdown">
...
</div>
But the problem is, dates selected in one calendar is reflected in the later one also.
I tried separating them by changing id and class also. But still both of them are responding together. I want them to act independently.
Please correct me.
It happens because you are binding two inputs to the same variable with the [ngModel], due to which a change in one gets reflected in the other.
Try changing the ngModel value.
<div class="year-div">
<input type="number" [(ngModel)]="year" value="2019" min="2018" max="2024">
</div>
If you enter the same value for both ngModels it will reflect the other one as well. You need to use different values for each ng-model.
Make sure you should clear the dates which you selected with another one. Make "ID" should be different in each compoenent.
Related
I made html template for my app. Basically it's a radio/checkboxes with text inputs which contain answers to questions. It worked just fine until I've decided to add ngModel to them. The thing is that when I add 2 or more answers and click on a label to set the correct one(/s) only the last one selects, moreover the answertext disappears whenever I click on label.
html text:
<div *ngIf="question.typeQuestions==1">
<div *ngFor="let item of question.selectedAnswer; let i = index" class="checkbox-variable">
<input type="checkbox" id="customCheckbox{{i}}" name="customCheckbox" class="checkbox-square" [(ngModel)]="item.isCorrect" >
<label class="checkbox-label" for="customCheckbox{{i}}"><input class="checkbox-text" type="text" [(ngModel)]="item.text"></label>
</div>
</div>
ChrisY solved the problem.
having multiple input with the same name is definitive wrong here. Try name="customCheckbox{{i}}". When using ngModel you need a name that identifies the form control. It has to be unique
so I'm trying to use binding in Angular2 so that when someone selects a name from a dropdown menu at the top of my webapp then that name replaces specific placeholders throughout the form so it displays the person's name rather than "this person" or "your teammate".
Not only do I want the name value of the object to be substituted into those placeholders, but I also want the email value to be pulled as well so that I can call on that from a mailing service when I press submit to send an email.
I've managed to get the binding working, so at the moment when I select the name it inserts it into the text, but I'm having trouble figuring out how to make placeholders that can be replaced with the selected name.
Also, how can I pull 2 values (name & email) from one ng-model?
an excerpt of my code:
<div id="toggle" class="row">>
<div class="dropdown">
<div class='col-md-6 col-md-offset-5'>
<select [(ngModel)]="selectedTeammate.name">
<option *ngFor="let teammate of teammates" value= {{teammate.name}}>{{teammate.name}}</option>
</select>
</div>
</div>
</div> s
<form>
<div id="questions">
<div id="question1" class="row">
<div id="questionbox" class='col-md-10 col-md-offset-1'>
<p>{{question1a}} {{ selectedTeammate.name }} {{question1b}} {{ selectedTeammate.name }} {{question1c}}</p>
</div>
<div id="textbox" class='col-md-6 col-md-offset-3'>
<textarea id="styled" placeholder="Why or why not?"></textarea>
</div>
</div>
<div id="question2" class="row">
<div id="questionbox" class='col-md-10 col-md-offset-1'>
<p>{{question2a}} {{selectedTeammate.name }} {{question2b}}</p>
</div>
<div id="textbox" class='col-md-6 col-md-offset-3'>
<textarea id="styled" onfocus="this.value=''; setbg('#e5fff3');" placeholder="Please provide a brief explanation"></textarea>
</div>
</div>
What it looks like:
The selected name is inserted into the string, but I need a placeholder to fill the gap in the sentence until a name is selected
If anyone can help me with my dropdown menu as well, then that would be absolutely fantastic! I've tried bootstrapping my dropdown to make it prettier, and even copied code from the bootstrap website to test, but the dropdown doesn't display any of the options when clicked. Here is the code I'm using for it.
<div class="dropdown row">
<div id="dropdown column" col-md-3 col-md-offset-3 style="margin: 0 auto; text-align: center;">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" >Select a teammate youve worked with!
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
The dropdown displays correctly, but when clicked nothing happens and I don't see any of the list objects. I need this to work with ngFor just like the above dropdown does.
I'm also having issues trying to setup a favicon for the site.
I've included this in my of my index file:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
and here is the file path of my favicon image:
C:\Users\user1\Desktop\Projects\sds-app\src\app\assets\Pictures\favicon.ico
I know this is a lot and maybe not formatted in the best manner, but let me know if there is any additional information you'd like. If you can help me with any of these questions I'd very much appreciate it!
Thanks!
In bootstrap select option you can show default show option as Select so you have to add one more line as option.
<select [(ngModel)]="selectedTeammate.name">
<option value="">Select</option>
<option *ngFor="let teammate of teammates" value= {{teammate.name}}>{{teammate.name}}</option>
</select>
So code will look like this.
Using ngValue you can pull the whole Object from your [(ngModel). To set a "placeholder" for your Object, so that you have some value there in your view until replaced with your chosen teammate, you can initialize the selectedTeammate with some values, e.g:
selectedTeammate: Object = {id: null, name: 'your teammate', e-mail: ''};
And as mentioned, use ngValue to bind the whole object, and change the ngModel to be e.g selectedTeammate like I have used in these examples.
<select [(ngModel)]="selectedTeammate">
<option *ngFor="let teammate of teammates" [ngValue]="teammate">{{teammate.name}}</option>
</select>
Now when you have chosen a teammate, selectedTeammate consits of the whole object, not only the name. From there you can pull the e-mail related to that teammate.
Hope this helps! :)
Demo plunker
I want to create a data driven form using angular JS.
I am able to do ng-repeat and loop through the JSON fields for each title and include an input box with in.
But now I need to have different text box type for different field (also pass in from JSON. such as 'input' or 'textarea'
<div>
<div ng-repeat="x in form">
<h4>{{x.field_name}}</h4>
<input class="form-control" placeholder="{{x.field_name}}" ng-model="result[x.field_name]">
</div>
</div>
I want to be able to change the tag based on the JSON I passed in.
I've tried using
<x.field_ui_type
I've also tried
<{{x.field_ui_type}}
but none of them seems to work
Try like this:
<div ng-repeat="x in form">
<h4>{{x.field_name}}</h4>
<div ng-switch on="x.field_ui_type">
<textarea ng-switch-when="textarea" ng-model="result[x.field_name]"></textarea>
<input type="textbox" ng-switch-when="input" ng-model="result[x.field_name]" />
</div>
</div>
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)
I have 3 radio button inputs in three separate divs:
<div class="box1">
<input type="radio" name="paymentOption" checked="checked" value="creditcard_on_file" />
<!-- related subfields for that chosen option -->
</div>
<div class="box2">
<input type="radio" name="paymentOption" value="newCard" />
<!-- related subfields for that chosen option -->
</div>
<div class="box3">
<input type="radio" name="paymentOption" value="check" />
<!-- related subfields for that chosen option -->
</div>
on page load, the first one is default selected. and in IE9, when another is clicked, the first one stays selected! whoa.
what can I do to make it behave properly?
it works fine for me.. but if its a compatibility issue. try using JavaScript to clear out the other items.
try this:
How to reset radiobuttons in jQuery so that none is checked
There was a typo in some other html surrounding the given markup. I've learned that IE seems to handle the situations of invalid markup a bit differently that other browsers in that it either duplicates a section, or will hide a section. Since in this case neither of those issues occurred, the markup within incorrect html has misbehaved.
We had the same problem on IE 9.0.8112 64-bit ONLY but for different reasons. We had forgotten to assign a name to associate the inputs together. The funny thing is that this worked on every other browser, because we were using AngularJS's ng-checked to set the radio button state (even the non-64 bit version of IE 9).