I'm getting info from json and printing on a dropdown. Next, my code:
function firstCombo (){
$http.get('app/combo.json')
.then(function(data){
vm.dataCombo = data.data;
//console.log(vm.dataCombo);
});
}
On my html view:
<div class="col-md-4 col-md-offset-3"> What is this?
<button type="button" id="options1" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">
Select one <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="list1">
<li ng-repeat="dea in $ctrl.dataCombo">{{dea.value}}</li>
</ul>
</div>
The returned values are just 3:
Apple
Orange
Mango
What i want to do, is to show an input if the user selects "Apple":
<div class="row" ng-show="false">
<div class="col-md-4">What kind of apple?<input type="text" class="form-control"></div>
</div>
Right now, is hidden with ng-show="false", but, what am i have to do to show/hide the input if the value of dropdown is "Apple"? Guess is very simple, but right now, i'm in blank.
Thanx in advance.
you can use ng-if rather than ng-show/hide option.This is one of best practice in AngularJs
<div class="row" ng-if="selectedValue=='Apple'">
<div class="col-md-4">What kind of apple?<input type="text" class="form-control"></div>
</div>
Related
I am new to javascript and jquery. While learning this I ran into a few issues. I wanted to know what I am doing wrong here. I am using a textarea element to type in. When I run the jQuery script below it will post to the dive I called read-post no problem But I cannot run the click Function to append to the textarea. Also, if I start typing in the text area I cannot append to the textarea. However, If I start frest I can append to the textarea no problem.
$(".btn-post").click(function() {
$("div").append($("textarea").val() + '<br />');
$("textarea").val('');
$("textarea").html('');
});
$("div #icon > span").click(function() {
$(".textarea").append($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row post-body">
<div class="col-2 p-0 post-img-holder my-auto p-1">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item">
<a href="uuid">
<img class="post-img" src="$imgPath">
</a>
</div>
</div>
</div>
<div class="col-10 p-0">
<textarea class="post-input" type="textblock" placeholder="What do you want to share, uuid?"></textarea>
</div>
</div>
<div class="row post-footer">
<div class="col-10 float-left dropdown">
<a class="dropdown-toggle emoji-icon" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">😀</a>
<div id="emoji-icon" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<span>😀</span><span>😃</span><span>😄</span><span>😁</span><span>😆</span>
<span>😅</span><span>🤣</span><span>😂</span><span>🙂</span><span>🙃</span>
</div>
</div>
<div class="col-2 float-right">
<button class="btn btn-secondary btn-sm btn-post" type="post">Post</button>
</div>
https://jsfiddle.net/hmwLox17/
u have two missing one of them is your icon id is #emoji-icon but u wrote just #icon,
second missing is u should write $("textarea") bu u wrote $(".textarea")
$(".textarea") means u have an element whose class is textarea
#icon means u have element whose id is icon
$("div #emoji-icon > span").click(function(){
$("textarea").val($("textarea").val()+$(this).text());
});
I have the below code to create a form input field which the user can type their search query into as normal. However, I also want to dropdown option to be part of this input. The problem I have, is that when the user selects an option from this dropdown, there is no placeholder text that appears in the input field or nor does the input text change to show the user what they just selected from the dropdown. I tried to write a small script which would detect if an li a was selected and it would update the input field accordingly but I am a bit stuck. Any help welcome.
<form role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control" placeholder="Search">
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</form>
$('ul li a').on('select', function () {
var selectedOption = $(this).find("placeholder").text();
$(this).text(selectedOption);
})
Here you have an working jsfiddle
$('ul li a').on('click', function () {
var selectedOption = $(this).text();
$('.form-control').val(selectedOption);
})
Try this code :
$('#color-dropdown-menu li').click( function () {
$('.form-control').attr('placeholder',$( this ).text());
});
HTML :
<form role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control" placeholder="Search">
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</form>
CHECK IT
my HTML is a static variant, not a solution builded with ng-repeat or an existing JSON/Angular Controler.
I need to select a custom option and used alreay ng-select without a success.
My HTML looks like:
<div class="btn-group" dropdown>
<button type="button" class="pull-right btn btn-block btn-dropdown" dropdown-toggle>
<div class="pull-left">
<i class="flag-{{my.filter.flag}} left vcenter"></i>
<span class="vcenter">{{my.filter}}</span>
</div>
<div class="pull-right"><span class="caret"></span></div>
</button>
<ul class="dropdown-menu" dropdown-menu ng-init="options[0]">
<li ng-class="{active: my.filter == 'Germany'}">
<a ng-click="my.filter = 'Germany'; my.filter.flag='DEU'"><i class="flag-DEU"></i><span>Germany</span></a>
</li>
<li ng-class="{active: my.filter == 'England'}">
<a ng-click="my.filter = 'England'; my.filter.flag='GBP'"><i class="flag-GBP"></i><span>England</span></a>
</li>
</ul>
</div>
so how can i solve it to preselect the option "Germany" by pageloading into the div.pull-left section?
You mention ng-select in your question, but you used ng-selected. Maybe it is just a typo.
I've been following several posts on here about returning the value selected from a drop-down list and setting the title of the drop-down to this selection.
current: How to change the main display of dropdown when an item is selected in bootstrap
Ive tried several other examples but none are working for me when other scripts work fine.
Can anyone see my silly error? (I know it has to be something small)
My Dropdown:
<div class="form-group">
<label for="platform" class="control-label col-xs-2">Platform:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default" id="pickButton" data-toggle="dropdown">
<span id="dropdown_title">Select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="selectionDropdown">
<li><a tabindex="-1" href="#">Android</a></li>
<li><a tabindex="-1" href="#">IOS</a></li>
<li><a tabindex="-1" href="#">Windows Phone</a></li>
</ul>
</div>
</div>
</div>
My Script:
<script>
$(document).ready(function () {
$('#pickButton').dropdown();
$('#selectionDropdown li').on('click', function() {
$('#dropdown_title').html($(this).find('a').html());
});
});
</script>
Code appears to have fixed itself (blame VS2013) due to no answers please see question for working code.
In my main view, I have an add button. Clicking the add button brings in a partial view.
Main.cshtml
<div id="NameCats">
#Html.Partial("_Temp")
</div>
<div class="row">
<button id="addInfo" class="btn"><img src="~/Content/Images/Add.PNG" /></button>
Add Info
</div>
In my Temp partial view, I have multiple bootstrap input drop down groups.
_Temp.cshtml
<div id="info">
<div class="well">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input id="name" type="text" class="form-control dropdown-text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="nameList" class="dropdown-menu pull-right">
<li> <a tabindex="-1" href="#"> Test1 </a> </li>
<li> <a tabindex="-1" href="#"> Test2 </a> </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<input id="cat" type="text" class="form-control dropdown-text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="catList" class="dropdown-menu pull-right"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
Selecting an item from first drop down should fill in the input for that drop down with the selected value. Here is my javascript to make it work. The problem is when I select item from the drop down that is rendered initially, the click (li a) function works but when I click Add button and then try to repeat the selection for the drop down in this new info section, the click (li a) function is not hit. What am I doing wrong?
$(function () {
$('.dropdown-menu').each(function () {
$(this).on('click', 'li a', function () {
$(this).parents(".input-group").find('.dropdown-text').val($(this).text());
});
});
});
$(function () {
$('#addInfo').click(function (e) {
e.preventDefault();
$('#NameCats').append($("#info").html());
});
});
The issue is your that your newly added elements do not have a click handler associated with them, since the function to add the handler is only run on page load. You have the concepts of event bubbling in place, but on the wrong parent elements and that essentially only keeps an eye on new li a elements and not entire dropdown-menu being added.
Change your first function to the following, which will keep a "watch" on any dropdown-menu added in the #NameCats element.
$(function () {
$('#NameCats').on('click', '.dropdown-menu li a', function () {
$(this).parents(".input-group").find('.dropdown-text').val($(this).text());
});
});
Here is a jsFiddle working example.