Here is the code which i was tried. i tried to add placeholder with angularjs code and html code but it is not working in both the case. please help me or suggest me how to do in this case
<select ui-select2="select2Options"
style="width:100%"
ng-model="SelectedProcessandIngredients"
data-placeholder="Select or Add Process/Ingredient"
ng-options="c.name group by c.status for c in colors"
ng-change="selectedinnerLoop()" >
</select>
Angular js Code:
$scope.select2Options = {
placeholder : "Select or Add Process/Ingredient",
formatResult : processList,
formatSelection : processList,
escapeMarkup : function (m) {
return m;
}
};
Add an empty option tag inside your select tag and the placeholder will be shown.
Also, use ng-repeat instead of ng-options. Select2 is incompatible with ng-options.
<select ui-select2 ng-model="select2" data-placeholder="Pick a number">
<!-- empty option gets placeholder working -->
<option value=""></option>
<!-- ng-repeat to populate dynamic options -->
<option ng-repeat="number in range" value="{{number.value}}">{{number.text}}</option>
</select>
Related
Using Angular 8 & Bootstrap 4
I am trying to implement searching in a select tag using bootstrap-select library from https://developer.snapappointments.com/bootstrap-select/ .
Below is my html
<select class="form-control selectpicker" data-live-search="true" id="field_bankName" name="bankName" formControlName="bankName">
<option *ngIf="!editForm.get('bankName').value" [ngValue]="null"></option>
<option [ngValue]="paymentMethodOption.id === editForm.get('bankName').value?.id ? editForm.get('bankName').value : paymentMethodOption" *ngFor="let paymentMethodOption of paymentmethods; trackBy: trackPaymentMethodById">{{paymentMethodOption.bankName}}</option>
</select>
I call selectpicker js in my ngOnInit() function
(<any>$('.selectpicker')).selectpicker();
I already import the bootstrap-select.min.css in my styles.css, and it looks fine.
#import url(assets/css/bootstrap-select.min.css);
I also import the bootstrap-select.min.js in my index.html
<script src="assets/js/bootstrap-select.min.js"></script>
I have a problem in displaying data to select tag, I can't display the data. When I don't use the bootstrap-select library, the data is displayed fine.
But when I insert dummy options such as: "Halo" & "Bandung" like my code below, it shows both "Halo" & "Bandung", only. It doesn't show my data.
<select class="form-control selectpicker" data-live-search="true" id="field_bankName" name="bankName" formControlName="bankName">
<option *ngIf="!editForm.get('bankName').value" [ngValue]="null"></option>
<option [ngValue]="paymentMethodOption.id === editForm.get('bankName').value?.id ? editForm.get('bankName').value : paymentMethodOption" *ngFor="let paymentMethodOption of paymentmethods; trackBy: trackPaymentMethodById">{{paymentMethodOption.bankName}}</option>
<option value="">Halo</option>
<option value="">Bandung</option>
</select>
I have two options like '+' and '-' in Select Tag. Here is my Code
<select kendo-drop-down-list k-ng-model="Directions">
<option ng-selected="Direction==0" value="0">+</option>
<option ng-selected="Direction==1" value="1">-</option>
</select>
when removing the 'kendo-drop-down-list' in select tag ng-select is working fine.
I want to keep kendo-drop-down-list along with ng-select should work.
I have a problem to read the information selected that is propagate in a select.
<div ng-show="deviceDetail != null" ng-model="example" >
<select >
<option value="NONE">Select</option>
<option ng-repeat="option in deviceDetail" ng-change="selectOption()">{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
</div>
this is the HTML code and in the {{example}} I want to see the information that the user selected.
this is the part of the js releted:
$scope.selectOption = function() {
$scope.example = option.productName;
};
How I can fix it?
Thanks a million!
Set your example scope variable directly in <select> instead calling ng-change event and assigning into that function.
You can directly set option.name to example model with the use of ng-options too.
Here You have applied ng-model directive to div tag.
<div> is not input element so apply ng-model to <select> element here.
I would suggest to use ng-options directive for filling the selection list in <select>. ng-repeat is also fine.
Here you are binging ng-change event so in the function if requires then you can pass the object on which event is triggering so you can use that object or perform any operation on that.
Below is the modified template.
<div ng-show="deviceDetail != null">
<select >
<option value="NONE">Select</option>
<option ng-model="example" ng-options="option in deviceDetail" ng-change="selectOption(option)">{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
</div>
You should to pass current option:
<select >
<option value="NONE">Select</option>
<option ng-repeat="option in deviceDetail" ng-change="selectOption(option )">{{option}}</option>
</select>
$scope.selectOption = function(option) {
$scope.example = option; // is there property .productName?;
};
Try this:
<div ng-show="deviceDetail != null">
<select >
<option value="NONE">Select</option>
<option ng-model="option" ng-options="option in deviceDetail" ng-change="selectOption(option)">
{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
Js:
$scope.selectOption = function(option) {
$scope.example = option;
};
You should use ng-options
The value of the selection is: {{example}}
Plunkr: http://plnkr.co/edit/pJRzKn2v1s865w5WZBkR?p=preview
I have 2 forms, a simple and advanced form.
Both have the same options (a lot of options)
Only a couple of differences in the opening select tag which contains
<select ng-show="showSimpleSelect"
ng-model="selected_tag"
ng-change="changeFormTag(formData)"
class="form-control manage-source-input-tag">
<!-- if advanced then -->
<select ng-show="showAdvanceSelect"
ng-model="formData.tag"
ng-change="changeTag(formData.tag)"
class="form-control manage-source-input-tag">
<option value="brand">Brand</option>
<option value="client">Client</option>
<option value="companies">Companies</option>
...
</select ng-show="showSimpleSelect">
</select ng-show="showAdvanceSelect">
In my Directives Controller, I'm using vars like this to show and hide the opening select tags:
vs.showSimpleForm = function() {
vs.showSimpleSelect = true,
vs.showAdvanceSelect = false,
However the HTML ends up looking like this, which breaks the design:
How would you go about refactoring this?
Angular overrides the select tag as a custom directive that expects an ng-options attribute instead of option tags. You can just hard-code your options into an array and put that as the ng-option
//controller
$scope.options = ["brand", "client", "companies"];
//html
<select ng-show="showAdvanceSelect"
ng-model="formData.tag"
ng-change="changeTag(formData.tag)"
ng-options="option for option in options"
class="form-control manage-source-input-tag">
I have a requirement where I need to show the text of angularjs dropdown (Not value) in the title tag of the dropdown box. My angular code is like this :
<select id="inputID" name="inputName"
ng-options="item.value as item.display for item in genders"
ng-model="model.Base.currentRecord.value.Code.value" class="form-control input-sm">
<option value="">Select...</option> </select>
As the dropdown is being generated dynamical, the value of the options and the text in the options are different. in the title tag I am able to get the value with title={{model.Base.currentRecord.value.Code.value}} but I need text not the value.
anyone has any idea ?
Would this work? demo
<select id="inputID" title={{model.Base.currentRecord.value.Code.display}} name="inputName" ng-options=" item.display for item in genders"
ng-model="model.Base.currentRecord.value.Code" class="form-control input-sm">
<option value="">Select...</option>
</select>
<strong>Selected value:</strong> {{model.Base.currentRecord.value.Code.value}}