I'm trying to set iconBase and tickIcon using data attributes as described in the manual, but it doesn't work (the icons don't show up). What am I doing wrong?
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<select class="selectpicker show-tick" data-iconBase="fa" data-tickIcon="fa-check" multiple>
...
</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>
Ng-repeat is not showing any data in select options. is there any different way to show option value in select for ng-repeat
When I am using without class="selectpicker" in select tag. Its working fine. How can I use bootstrap select with ng-repeat.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.11/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.11/js/bootstrap-select.min.js"></script>
<div>
<select ng-model="selEmployee" name="selEmployee" class="selectpicker">
<option value=0>All</option>
<option ng-repeat="employee in employees" value="{{employee.Ldap | lowercase}} ">{{employee.FirstName}} {{employee.LastName}}</option>
</select>
Thanks in advance
Use ng-options:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
https://docs.angularjs.org/api/ng/directive/ngOptions
I am using #angular/material 2.0.0 beta.10
In the appModule, I imported the MdFormFieldModule, MdInputModule.
My html looks like this:
<md-form-field>
<input type="text" mdInput placeHolder="Hi">
</md-form-field>
I don't get any error, but the input looks like a regular html input.
There is no floating label, no color on the line on focus etc.
What am I missing? do I need to import some css?
In the index.html page need to add a reference to the required theme
<link rel="stylesheet" type="text/css" href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css">
The «md-» prefix has been replaced by «mat-» in the latest version. So according to the documentation your code should be something like
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
I have a filter list using a select tag. I want to be able to filter the array based on the option selected. I have tried using v-model as this works with checkboxes but unfortunately doesn't work with select fields.
Any help would be amazing.
Please find my fiddle attached
<div id="app">
Selected: {{concatenated}}
<select>
<option v-for="item in vals" :select="item.selected">{{item.value}}</option>
</select>
<!--
<div v-for="item in vals">
<p>
<input type="checkbox" v-model="item.selected">{{item.value}}
</p>
</div>
-->
</div>
https://jsfiddle.net/39jb3fzw/2/
You should take a look at the docs and how they do databinding with select.
https://jsfiddle.net/s3x096u3/1/
<select v-model="selected">
<option v-for="item in vals" :value="item.value" :key="item.value">{{item.value}}</option>
</select>
With regards to your code, a select attribute on an option element doesn't do anything.
When the html page loads I need to load the default tableView.html which is present in the views folder. This is not working
But when I change the drop down "Table View" or "List View" it works.
The problem I think is that if I am giving
$scope.employeeView = 'tableView.html';
then the Table View will be shown in default when the page loads.
But how can I call a html page inside a folder.
I am attaching the code
Thanks in advance.
$scope.employeeView = 'views/tableView.html';
<div id="tableView">
<label for="selectView">Select View</label>
<select id="selectView" ng-model="employeeView">
<option value="views/listView.html">List View</option>
<option value="views/tableView.html">Table View</option>
</select>
</div>
<br>
<div ng-include="employeeView"></div>
Initially
$scope.employeeView = '/views/tableView.html';
<div id="tableView">
<label for="selectView">Select View</label>
<select id="selectView" ng-model="employeeView">
<option value="views/tableView.html">Table View</option>
<option value="views/listView.html">List View</option>
</select>
</div>
Folder Structure
Since i was running in my local machine on chrome Cross origin requests are only supported for protocol schemes . So the view wasn't showing. But the code was correct.
$scope.employeeView = 'views/tableView.html';