I have a selected option in my select tag. The purpose of the selected tag is to display all the stores in the div tag underneath. I've been searching around and some suggest ng-selected, ng-init and ng-options, but I have no idea which one or how I should do it.
I've managed to sort the stores based on their category which you can find in the select tag, but I can't display all of them :/
Here's my code:
<select style="width:100px;" ng-model="selectedCategory.category" ng-options="category.id as category.name for category in categories">
<option ng-selected="{{}}" selected value="">Visa Alla</option>
<!-- {{ selectedCategory.category }} -->
</select>
<div class="row row-white" style="margin-bottom:10px" ng-click="browseShop(shop)" ng-repeat="shop in shops | filter:selectedCategory" ng-show="isAvailable(shop)">
<div class="col"></div>
<div class="col">
<img ng-src="{{shop.img}}" />
<br/>
<span style="color:black">{{getCategory(shop)}}</span>
</div>
<div class="col"></div>
</div>
Really thankful for all the help I can get!
Related
I'm working with the latest version of Bootstrap v5.2 and Vue 3 (just for understanding).
I've found a similar question on Stackoverflow but this was with an older version of Bootstrap.
I have a select and I want to add my id of my element from my v-for as a badge (Documentation: https://getbootstrap.com/docs/5.2/components/badge/#pill-badges) in front of the upcoming text of my element.
My code:
<div class="row mt-3">
<div class="col-12">
<span>Select with Badge</span>
<select class="form-select" v-model="test_select_badge">
<option v-for="element in select_array" :key="element.id" :value="element.id">
<span class="badge text-bg-primary me-2">{{element.id}}</span>{{element.text}}
</option>
</select>
</div>
</div>
But this is not working out. How can I achieve my goal? Thank You.
I've used an dropdown and desigend it like a select. Than it worked out for me.
so I have a page. there's a search bar. if the search bar has no text inputted, the page displays two partials, one for featured apps and one for most popular. but if someone inputs any text at all into the search bar then the featured apps and most popular apps partials disappear and the search results partial shows up. instead what happens is neither partials load. there's just a big blank space where they should be.
I tried doing this with jQuery but was having no luck. so now I'm back to trying to use dynamic partials but am also having no luck with that. if this can only be done with something like jQuery please let me know.
I was briefly trying to use a handlebar helper but I could not link it to the input id="searchApps" element without throwing an error because it keeps saying searchApps is undefined.
index.hbs (if this is missing any divs it's cause it's just part of the code)
<div class="col-2 offset-1">
<div class="column-side">
<div class="sidebar">
<input id="searchApps" type="text" placeholder="Search apps...">
{{!-- so once someone types the first character here the searchResults partial should render. and it should be dynamic so results should further refine with each additional character typed--}}
{{>sidebar}}
</div>
</div>
</div>
{{#if 'searchApps.length === 0'}}
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
{{else}}
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
{{/if}}
here is the jQuery I tried in the index.hbs file just before the </body> tag
<script type="text/javascript">
$('#searchApps').on('change', function(){
if ($(this).val() == ""){
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
} else {
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
}
});
</script>
so anyone know how I can do this?
thanks
(Backend developer trying to do some front end development here)
I have a simple HTML form with some text field inputs and a select menu. When the form is submitted I see the text field values hitting the web server but I don't see the value for the select menu hitting the server. The code for the select menu is:
<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon role-list">
<i class="material-icons mdc-select__icon" tabindex="0" role="button">work_outline</i>
<div class="mdc-select__anchor role-width-class">
<i class="mdc-select__dropdown-icon"></i>
<div id="role" class="mdc-select__selected-text" aria-labelledby="roles-select-label"></div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label id="roles-select-label" class="mdc-floating-label">Role</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface role">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="0">
Painter
</li>
<li class="mdc-list-item" data-value="1">
Electrician
</li>
<li class="mdc-list-item" data-value="2">
Decorator
</li>
</ul>
</div>
</div>
The select menu is a material design component as described here.
The Javascript I have associated to this component is:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
alert(`Selected option at index ${role.selectedIndex} with value "${role.value}"`);
});
A couple of questions I have straight off the bat:
Should I be using <li> instead of <option> - the code above follows the examples shown on the website.
Should there be a name attribute?
Create a hidden input:
<input type="hidden" name="my_select" id="my_select" value="">
Then store the value there:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
document.getElementById('my_select').value = role.value;
});
There is a new update to this in material documentation in additional information section. It suggests doing the same thing that the accepted answer says but with no JavaScript.
Just wanted to put this out there for new people referring to this.
Select with hidden input (for HTML forms)
For convenient submission of Select's value in HTML forms, a hidden input
element may be added under the root element. The component will synchronize
its value with that of the hidden input.
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor">
<!-- Rest of component omitted for brevity -->
</div>
</div>
apologize before if my English is not good, i have a problem when using bootstrap-select in vue. https://github.com/snapappointments/bootstrap-select
<select class="selectpicker" v-bind:class="{'is-invalid': error}"></select>
<span class="invalid-feedback"> error </ span>
the code above will be displayed as below (inspect element):
<div class="dropdown">
<select></select>
</div>
<span class="invalid-feedback"> error </ span>
it doesn't work when using vue, because the is-invalid appears in <select> and the <select> is inside the div element <div class = "dropdown">
"invalid-feedback" will appear under "is-invalid".
anyone have a solution?
You have to provide what are you binding .In your case you are binding a class.So make sure to use v-bind:class="{'is-invalid': error}"
This should work. span with invalid-feedback class should be below the select tags.
<div class="dropdown">
<select></select>
<span class="invalid-feedback"> error </ span>
</div>
So, I'm having the same issue present on this question
Bootstrap-UI Typeahead display more than one property in results list?
And, I already modified the plunker on the answer to my linking and needs
http://plnkr.co/edit/FdkvCUUD3ob7dt256Bgd?p=preview
But then, I realize they are using the 0.5 version of angular-ui, and angular 1.0.5
On my project, i'm using angular 1.4.9 and anguilar-ui 1.3.3 but somehow, my results are not showing or show as undefined
Controller
app.controller('testController', ['$scope', function ($scope) {
$scope.sites = JSON.parse("[{\"SITE_CODE\":\"CODE1\",\"SITE_NAME\":\"NAME1\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE2\",\"SITE_NAME\":\"NAME2\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE3\",\"SITE_NAME\":\"NAME3\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE4\",\"SITE_NAME\":\"NAME4\",\"ADDRESS\":\"\"}]");
}]);
HTML
<div class="row">
<div class="col-xs-4">
<div class="typeahead">
<input type="text" class="form-control" ng-model="test" uib-typeahead="site as site.SITE_CODE for site in sites"
typeahead-no-results="noResults" typeahead-popup-template-url="siteList.html" />
</div>
</div>
</div>
<div class="row" ng-show="noResults">
<div class="col-sm-6">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
</div>
</div>
<script type="text/ng-template" id="siteList.html">
<div class="row">
<a tabindex="-1">
<div class="col-xs-4">
<span ng-bind-html-unsafe="match.model.SITE_CODE | typeaheadHighlight:query"></span>
</div>
<div class="col-xs-4">
<span ng-bind-html-unsafe="match.model.SITE_NAME | typeaheadHighlight:query"></span>
</div>
</a>
</div>
</script>
Any idea what am I missing?
Silly me, I just found out my issue
I was setting typeahead-popup-template-url instead of typeahead-template-url
After making this change, and adding ngSanitize to my module, everything went better than expected.
Now, I need to figure out a way to show the total of results, as I'll be only showing a fraction to the amount of results