How to preselect a option - Dropdown - javascript

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.

Related

Bulma hoverable dropdown doesn't show

js computes the structure below, i need a dropdown when the button is hovered whereas onclick should trigger the form submit.
nothing happens when i hover the button area. Is it because of is-active missing?
In Bulma's official docs about the dropdown menu, the example's indent can be confusing.
The "dropdown-menu" 'div' is a childnode of the main dropdown 'div'.
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Hover me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>

not able to get the selected tab value to the controller in angular.js

In html A i am calling html B which contain tab as shown is the image. now the "Save " and "Save All" button is in html B i have used css to move to the top but this is not the right way to do. I need "Save" and "Save All" button in html A but for this i need to know which tab is selected.
HTML B
<div id="confi">
<div class="row">
<section widget-grid id="widget-grid">
<div class="col col-md-12">
<div ng-if="currComp" jarvis-widget id="script-widget" data-widget-color="darken" data-widget-colorbutton="false" data-widget-editbutton="false"
data-widget-deletebutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-gear"></i>
</span>
<h2>Script Configuration for {{comp}}</h2>
</header>
<div class="widget-body padding-10">
<ul id="scriptTabs" class="nav nav-tabs bordered">
<li ng-repeat="s in scripts track by $index">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file"></i> {{s}}
<!-- <span class="badge bg-color-blue txt-color-white">6</span> -->
</a>
</li>
</ul>
<!-- style="height:400px;margin-bottom: 30px;" -->
<div id="scriptTabsContent" class="tab-content padding-10">
<div class="tab-pane active" id="s{{$index}}" ng-repeat="s in scripts track by $index">
<div style="height:753px;width: 100%;">
<div id="{{ s }}" style="height:100%;width: 100%"></div>
<div style=" position: absolute;margin-top: -910px;right: 0px;">
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;" ng-click="save(s)">Save</button>
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;margin-right: 20px;" ng-click="saveAll('all')">Save All</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Currently i am using button in TabsContent so that i can get the value of "s" to the controller B and i cont use ng-click it is giving me error
<li ng-repeat="s in services track by $index" ng-click="functionInScope(s)">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file" ></i> {{s}}
</a>
</li>
please help me to get the value of "s" with out using the ng-click, so that i can send the value of "s" to the controller A for the save function.
Just a suggestion, Can't we create a variable named "selectedTab" and when you click the tab just generate a KeyUp event from that tab and in this event you can change the value this variable and while posting just get the value from that "selectedTab" variable.
For reference how to generate an click event
https://angular.io/guide/user-input

Dynamic MVC Razor href based on active nav-tab

I have an MVC Razor project using Bootstrap where:
A main view has nav-tabs
The nav-tabs have a button and search field
The active nav-tab loads a partial view below
The partial view is a List
Picture Of Main Nav-Tabs and partial view list loaded below
I would like to have the "Create New" button and Search field urls change based on which tab is currently active.
So, if inquiries are selected, then the "Create New" button would link to \inquiry\create\id
If Media is selected, then it would link to \media\create\id
The nav-tabs are defined like so:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">
Inquiries
</li>
<li>
Events
</li>
<li>
Media
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group is-empty">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<input type="text" class="form-control col-md-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#Url.Action(" Create ", "Inquiry ", new { id = Model.ID })">
<span class="glyphicon glyphicon-plus"></span>
<strong>Create New</strong>
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="inquiries" role="tabpanel">
#{Html.RenderAction("List", "Inquiry", new { id = Model.ID });}
</div>
<div class="tab-pane" id="events" role="tabpanel">
#{Html.RenderAction("List", "Event", new { id = Model.ID });}
</div>
<div class="tab-pane" id="media" role="tabpanel">
#{Html.RenderAction("List", "Media", new { id = Model.ID });}
</div>
</div>
I have tried many different methods, but can't figure out how to get this working. I constantly run into issues mixing Razor syntax and Javascript together. I would greatly appreciate any feedback or suggestions that people may have to get me on the right path.
You can basically keep the create url link for each tag in the data attribute of each link listen for the click event. When clicked, read this data attribute value and set the create link's href value
<li class="active">
<a href="#inquiries"
data-create="#Url.Action("Create","Inquiries")"
class="tabLinks" data-toggle="tab">Inquiries</a>
</li>
<li>
<a href="#events" data-create="#Url.Action("Create","Events")"
class="tabLinks" data-toggle="tab">Events</a>
</li>
<li>
<a href="#media" data-create="#Url.Action("Create","Media")"
class="tabLinks" data-toggle="tab">Media</a>
</li>
<a id="createLink"
href="#Url.Action("Create", "Home ", new { id = Model.ID })">
<span class="glyphicon glyphicon-plus"></span>
<strong>Create New</strong>
</a>
Now listen to the click event on these links, read the data attribute value and set it to the href property value of the create link.
$(function() {
$(".tabLinks").click(function (e) {
$("#createLink").attr("href", $(this).data("create"));
});
});
You can do the same for the search form.

How to (1) get selected value from Angular/Bootstrap dropdown and (2) show selected choice?

I'm trying to get Angular-UI dropdown to work:
http://angular-ui.github.io/bootstrap
How do I pass the value to my Angular function so I can process it?
How can I display the selected choice after the user selects it instead of always showing "Please Select:"
Plunker:
http://plnkr.co/edit/1Vz8T4NMi39JpdSdXgFd
HTML:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="DropdownCtrl">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
type="button" id="menu1" data-toggle="dropdown" ng-click="toggled">Please Select:
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" ng-repeat="choice in items">
<a role="menuitem" tabindex="-1" href="#">{{choice}}</a>
</li>
</ul>
</div>
</div>
</body>
</html>
JavaScript:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = ['one','two','three','four'];
$scope.toggled = function(value) {
alert('the value you chose was ' + value)
};
});
For Angular 4 with Bootstrap v4.0.0-alpha.6, here's a tip on how you could do this:
HTML for Bootstrap dropdown control
<div class="form-group row">
<label class="col-md-3 form-control-label">Account</label>
<div class="col-md-9">
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
{{selectedValue}} <span class="caret"></span>
</button>
<ul dropdownMenu class="dropdown-menu" role="menu">
<li *ngFor="let account of accounts" value="{{account._id}}" (click)="selectValue(account)"
class="dropdown-item">{{account.firstname}} {{account.lastname}}
</li>
</ul>
</div>
</div>
</div>
JS Component Code
export class UserFormComponent implements OnInit {
selectedValue: string = '-- select value --';
selectedId: string;
// On-Click Method on dropdown control
selectValue(account: Account) {
this.selectedValue = account.firstname + ' ' + account.lastname;
this.selectedId = account._id;
}
}
In your HTML, modify the code related to the dropdown to add binding to the text displayed in the dropdown (via ng-bind) + execute a function when an element in the dropdown is clicked (via ng-click) :
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
type="button" id="menu1" data-toggle="dropdown" ng-click="toggled" ng-bind='selected'>Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" ng-repeat="choice in items">
<a role="menuitem" ng-click="setTutorial(choice)" tabindex="-1" href="#">{{choice}}</a>
</li>
</ul>
</div>
Then in the javascript, add this function which is executed when an element in the dropdown is clicked:
$scope.selected = "Tutorial";
$scope.setTutorial = function(value) {
$scope.selected = value;
}
With this function, you can:
1. get the value of the item which is clicked
2. update the selected choice.

jquery not() function not working on all elements

I am using jquery not to remove html of elements.
I don't get jQuery not() work in proper way. It removes all elements from children except the last one that I mentioned.
My Html-
<body>
<div id="edit-save-section">
<button id="edit-button" class="btn btn-info btn-large">
<span><i class="fa fa-cog"></i> EDIT</span>
</button>
<button class="division-twenty btn btn-success btn-large" data-loading-text="Saving..." class="btn btn-primary" id="btn_save"><span><i class="fa fa-save"></i> SAVE</span>
</button>
</div>
<nav id="menu">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
</ul>
</nav>
<div class="removable-section">
<b><i class="fa fa-arrows fa-2x"></i></b>
<a class="span1 pull-right remove-section-action" rel="tooltip" title="Remove section" data-placement="left" href="javascript:;"><b><i class="fa fa-times fa-2x"></i></b></a>
</div>
<div id="allhtml"></div>
</body>
Clearing html with jQuery-
$('#btn_save').click(function () {
var notAll = $('body').children().not("#menu", ".removable-section", "#edit-save-section").html();
$('#allhtml').append(notAll);
console.log($('#allhtml').html());
});
Somehow I managed removing #menu and .removable-section , But I can't remove #edit-save-section
And If i try to change order of these sections like-
var notAll = $('body').children().not("#menu","#edit-save-section",".removable-section").html();
Then it acts weird. It doesn't remove from body the last children found in above html structure. Here in this case it is .removable-section.
Let me know what is that I am doing wrong?
You can also use JQuery Clone to achieve this
$('#btn_save').click(function () {
var notAll = $('body').clone(true);
notAll.find("#menu").remove();
notAll.find(".removable-section").remove();
notAll.find("#edit-save-section").remove();
$('#allhtml').append(notAll);
});

Categories