Beginner here...user can select filter values from drop down .Each selection should add a new drop down with selected value..intention is user can edit the selection the way they want and select as many filter they want...how to implement this in angular 6?any pointers..thanks for help..
Please check this, I done this from an assumption. I think you can reach your need by using this code.
html
<div>
<div id="AddItem">
<h2>Add State/City</h2>
<select [(ngModel)]="dataDetails" (change)="addData("")">
<option value="">-- choose an item --</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
</div>
<div *ngFor="let item of items;">
<select [(ngModel)]="selectedData" (change)="addData(item.name)">
<option value="item.name">{{item.name}}</option>
</select>
</div>
<div>
{{a}}
a: <input [(ngModel)]="a" ng-change="changeData()" />
b: <input [(ngModel)]="b" />
</div>
</div>
js
items:any = [];
addData(data=""){
if(this.dataDetails || data){
if(!data)
data = this.dataDetails;
this.items.push({
name: data
});
}
}
is there any reason why this simple code won't work? I'm trying to have a placeholder on my select, but it simply shows as one of the other options in the list.
<div *ngFor="let d of formDatiRichiesta" class="form-row">
<select *ngIf="d.type=='select'"
class="form-control"
name="{{d.name}}"
[(ngModel)]="model[d.name]"
required>
<option selected disabled>{{d.placeholder}}</option>
<option *ngFor="let b of elencoBanche" value="{{b.id}}">{{b.denominazione}}</option>
</select>
</div>
I'm using angular4. Thanks.
--EDIT--
I found out that if I delete [(ngModel)]="model[d.name]" all works fine. Any hint?
You have to set the value of the <option> to the value of the model, because the <select> will use the value of the model as the default selection.
When the model is undefined at the beginning you can do it like this:
<option value="undefined">Please choose...</option>
That's how it is supposed to work. With the attributedisabled you can't choose it as an option.
But you could add the hidden attribute to also hide it:
<option value="" selected disabled hidden>{{d.placeholder}}</option>
<select formControlName="value" class="form-control"
style=" height: 40px">
<option [ngValue]="null" selected disabled hidden>Select</option>
<option>Save</option>
<option>Download</option>
</select>
Add this simply it will work.
<option value="" disabled>Select Category</option>
Or
<option [ngValue]="null">Select Category</option>
I want to create a page where you can add from 1 to n products dinamically.
I've been working with AngularJS for a couple of months but it's kind of difficult for me to think this.
The html code I tought about it's something like this:
https://plnkr.co/edit/2MYbkYeAf4lZSRIh2c8l?p=preview
Here it is the entire template:
<div class="container text-center">
<h1>Make a sale</h1>
<br>
<form>
<div class = "divedp">
<label for="idNumeroFactura" class="col-form-label" >Invoice number: </label>
<input name="inpNumeroFactura" id="idNumeroFactura" maxlength= "8" type="text" ng-model="numeroFactura" class= "form-control"/>
</div>
<h6 class="small">products</h6>
<div class = "divedp">
<label for="idProducto">Product: </label>
<select name="sltProducto" ng-options ="producto.nombreProducto for producto in productos"
ng-model="producto" class="form-control input-sm" id="idProducto">
<option value="">-Choose the product-</option>
</select>
<br>
<label for= "idCantidad" >Quantity: </label>
<select ng-model="cantidad" id="idCantidad" class="form-control input-sm">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br>
<button ng-click="showDiv=true; agregarProducto()" class="btn btn-default" ng-hide="showDiv"> Add another product</button>
</div>
<div ng-show="showDiv"> Here should appear the new product</div>
<button ng-click="guardarVenta()" class="btn btn-primary" type="submit">Save sale</button>
</form>
<span >{{mensaje}}</span> <br>
</div>
And this is the part I want to repeat:
<div class = "divedp">
<label for="idProducto">Product: </label>
<select name="sltProducto" ng-options ="producto.nombreProducto for producto in productos"
ng-model="producto" class="form-control input-sm" id="idProducto">
<option value="">-Choose the product-</option>
</select>
<br>
<label for= "idCantidad" >Quantity: </label>
<select ng-model="cantidad" id="idCantidad" class="form-control input-sm">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br>
<button ng-click="showDiv=true; agregarProducto()" class="btn btn-default" ng-hide="showDiv"> Add another product</button>
</div>
So when I click add another product button, all div code part should repeat below the first div. This way, the user can choose all products he want with the quantity he want.
I was thinking on creating a template, but this is already a template... I'm using ui-router to do the routering part, but I never repeated a template inside a template, and I never used a template inside a template at all.
Besides, this approach gives me some doubts:
How can I concatenate an attribute on a Json array? (I use Json to communicate between frontend and backend)
How can I avoid users to repeat the same product item? should I take this problem to an AngularJS controller or can I handle it with directives?
Thanks for reading.
Since you didn't show any controller, I can provide only abstract idea of solution. Here goes anyway.
Repeating
Simple looping over collection of data is done with ngRepeat. In your controller, you need to manipulate the collection and angular will propagate the change for you
<div ng-repeat="productBlock in productBlocks track by productBlock.id">
<!-- your repeated code here -->
<button ng-click="removeProductBlock(productBlock.id)"> remove </button>
</div>
<button ng-click="addProductBlock()"> add </button>
ngRepeat documentation
Prohibiting user from selecting duplicate product
You can achieve this, again, with manipulating a collection in your controller. This time, the collection would hold products still available to choose. Angular will help you with propagating the change from controller to your view with the ngOptions directive
<select
ng-options="product as product.label for product in productsAvailable track by product.id"
ng-change="selectProduct(product.id)">
</select>
The selectProduct method will be responsible for removing the product from productsAvailable collection.
Keep in mind that it also has to "put back" any products not being used on update.
ngOptions documentation
I am trying to make a dropdown list that contains a placeholder. It doesn't seem to support placeholder="stuff" as other forms do. Is there a different way to obtain a placeholder in my dropdown?
Yes just "selected disabled" in the option.
<select>
<option value="" selected disabled>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
Link to fiddle
You can also view the answer at
https://stackoverflow.com/a/5859221/1225125
Use hidden:
<select>
<option hidden >Display but don't show in list</option>
<option> text 1 </option>
<option> text 2 </option>
<option> text 3 </option>
</select>
dropdown or select doesn't have a placeholder because HTML doesn't support it but it's possible to create same effect so it looks the same as other inputs placeholder
$('select').change(function() {
if ($(this).children('option:first-child').is(':selected')) {
$(this).addClass('placeholder');
} else {
$(this).removeClass('placeholder');
}
});
.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
<option value="">Your Placeholder Text</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
if you want to see first option in list remove display property from css
Most of the options are problematic for multi-select.
Place Title attribute, and make first option as data-hidden="true"
<select class="selectpicker" title="Some placeholder text...">
<option data-hidden="true"></option>
<option>First</option>
<option>Second</option>
</select>
If you are initializing the select field through javascript, the following can be added to replace the default placeholder text
noneSelectedText: 'Insert Placeholder text'
example: if you have:
<select class='picker'></select>
in your javascript, you initialize the selectpicker like this
$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});
Add hidden attribute:
<select>
<option value="" selected disabled hidden>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
Try this:
<select class="form-control" required>
<option value="" selected hidden>Select...</option>
when using required + value="" then user can not select it
using hidden will make it hidden from the options list, when the user open the options box
Try #title = "stuff". It worked for me.
All this options are.... improvisations.
Bootstrap already offers a solution for this.
If you want to change the placeholder for all your dropdown elements you can change the value of
noneSelectedText
in the bootstrap file.
To change individualy, you can use TITLE parameter.
example:
<div class="form-group">
<label class="control-label col-xs-2" id="country">Continent:</label>
<div class="col-xs-9">
<select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="North America">America North</option>
<option value="South America">America South</option>
<option value="Antarctica">Antarctica</option>
<option value="Australia">Australia</option>
<option value="Europe">Europe</option>
</select>
</div>
</div>
Using Bootstrap, This is what you can do. Using class "text-hide", the disabled option will be shown at first but not on the list.
<select class="form-control" >
<option selected disabled class="text-hide">Title</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
in bootstrap-select.js Find title: null, and remove it.
add title="YOUR TEXT" in <select> element.
Fine :)
Example:
<select title="Please Choose one item">
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
I think, the Dropdown box with a class and JQuery code to disable the first option for user to select, will work perfectly as Select Box placeholder.
<select class="selectboxclass">
<option value="">- Please Select -</option>
<option value="IN">India</option>
<option value="US">America</option>
</select>
Make the first option disabled by JQuery.
<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>
This will make the first option of Dropdown as Placeholder and user will no longer able to select the first option.
Hope It helps!!
The right way to achieve what you are looking for is to use the title attribute.
The title global attribute contains text representing advisory information related to the element it belongs to.
title="Choose..."
for example:
<select class="form-control selectpicker" name="example" title="Choose...">
<option value="all">ABCDEFG</option>
<option value="all">EFG</option>
</select>
check the documentation for more info about bootstrap-select
custom-button-text
Here's another way to do it
<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
<option value="">Choose Platform</option>
<option value="iOS">iOS</option>
<option value="Android">Android</option>
<option value="Windows">Windows</option>
</select>
"Choose Platform" becomes the placeholder and the 'required' property ensures that the user has to select one of the options.
Very useful, when you don't want to user field names or Labels.
Bootstrap select has an noneSelectedText option. You can set it via data-none-selected-text attribute.
Documentation.
For .html page
<select>
<option value="" selected disabled>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
for .jsp or any other servlet page.
<select>
<option value="" selected="true" disabled="true">Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
Using bootstrap, if you need to also add some values to the option to use for filters or other stuff you can simply add the class "bs-title-option" to the option that you want as a placeholder:
<select class="form-group">
<option class="bs-title-option" value="myVal">My PlaceHolder</option>
<option>A</option>
<option>B</option>
<option>c</option>
</select>
Bootstrap adds this class to the title attribute.
Solution for Angular 2
Create a label on top of the select
<label class="hidden-label" for="IsActive"
*ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
[(ngModel)]="filterIsActive" id="IsActive">
<option value="true">true</option>
<option value="false">false</option>
</select>
and apply CSS to place it on top
.hidden-label {
position: absolute;
margin-top: .34rem;
margin-left: .56rem;
font-style: italic;
pointer-events: none;
}
pointer-events: none allows you to display the select when you click on the label, which is hidden when you select an option.
angular html css
<option value="" defaultValue disabled> Something </option>
you can replace defaultValue with selected but that would give warning.
This is for Bootstrap 4.0, you only need to enter selected on the first line, it acts as a placeholder. The values are not necessary, but if you want to add value 0-... that is up to you.
Much simpler than you may think:
<select class="custom-select">
<option selected>Open This</option>
<option value="">1st Choice</option>
<option value="">2nd Choice</option>
</select>
This is link will guide you for further information.
HTML Code
<label class="hideContent" for="select_price_category">Select a price category</label>
<select id="price_category" style="margin-left:20px;" name="price_category">
<option price="1500" value="1">£300</option>
<option price="995" value="2">£200</option>
<option price="655" value="3">£300</option>
</select>
how do you do this
That should be within a form element. Take a look at this: http://www.w3schools.com/html/html_forms.asp