I'm trying to implement angular selectpicker.
The thing is when you go like this
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
everything's displayed good and you can see that selectpicker has a title of the first option.
But as soon as I added ng-model directive, It started having "Nothing selected" title that's completely unsuitable for me.
So how can I fix this?
HTML
<html ng-app="selectDemoApp">
<body>
<div role="main">
<div class="container">
<section ng-controller="SelectCtrl">
<div class="page-header">
<select class="selectpicker" ng-model="changeState" ng-change="go(changeState)">
<option value="https://google.com">Mustard</a>
</option>
<option value="/2.html">Ketchup</a>
</option>
<option value="/3.html">Relish</a>
</select>
</div>
</section>
</div>
</div>
</body>
</html>
JS
angular.module('selectDemoApp', [ 'angular-bootstrap-select', 'angular-bootstrap-select.extra']);
function SelectCtrl($scope, $location) {
$scope.go = function ( path ) {
alert(path)
};
}
Insert option:
<option style="display:none" value="">select...</option>
Add ng-init to initialize the value for the select field. Something like this ng-init="changeState='https://google.com'
Related
In laravel i need some help, i am new for laravel,
when select the option , then change the div if any one this
here is code please check
<select name="question_type_id" class="div-toggle" data-target=".my-info-1">
<option value="" disabled selected>Choose Question Type</option>
#foreach($question_type as $questy)
<option value="{{$questy->id}}">{{$questy->question_type_name}}</option>
#endforeach
</select>
This is db structure which is store the options in the image link please check
http://mrshineonline.com/images/database.png
div for changing is
<div class="1 box">
here multiple choice options
</div>
<div class="2 box">
Here fill in the blank options
</div>
This is with jquery. You can do it with vanilla js also but you provided no info
<select name="question_type_id" class="div-toggle" data-target=".my-info-1">
<option value="" disabled selected>Choose Question Type</option>
#foreach($question_type as $questy)
<option value="{{$questy->id}}" >{{$questy->question_type_name}}</option>
#endforeach
</select>
#foreach($question_type as $questy)
<div class="toggles-{{ $questy->id }}" class="hidden">
...
</div>
#endforeach
<script>
(function() {
var els = $("div[class^='toggles-']");
$('.div-toggle').change(function(event) {
els.hide();
$('.toggles-' + event.target.value).show();
});
})();
</script>
I am working on something which requires to come up with different options for different selections as list in forms.
for example:
If I select DR9 in System field, it has to show only 100,400,500 clients. same for QR9 - only 400 and 500.
But in my case, it's showing(100,400,500,400,500) repetitively.
Here is my code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<select>
<div ng-switch="myVar">
<div ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</div>
<div ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</div>
</div>
</select>
</form>
</div>
</body>
</html>
You cant apply ng-switch to a div with options instead add ng-switch to a div and apply ng-switch-when to select
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<div ng-switch="myVar">
<select ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
<select ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</select>
<select ng-switch-default>
<option>100</option>
<option>400</option>
<option>500</option>
</select>
</div>
</form>
</div>
</body>
</html>
The template can be simplified by using the ng-options directive:
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.myVar = "PR3";
$scope.otherOptions = otherOptions("PR3");
$scope.updateOtherOptions = function(myVar) {
$scope.otherOptions = otherOptions(myVar);
};
function otherOptions(myVar) {
switch (myVar) {
case "DR9": return [100,400,500];
case "QR9": return [400,500];
default: return [100,400,500];
};
};
})
<!DOCTYPE html>
<html>
<script src="//unpkg.com/angular/angular.js"></script>
<body>
<div ng-app="app" ng-controller="ctrl">
Password Reset
<form>
<br>
<label>System:</label>
<select ng-model="myVar" ng-change="updateOtherOptions(myVar)">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br>
Client options={{otherOptions}}
<br>
<label>Client:</label>
<select ng-model="otherSel" ng-options="sel for sel in otherOptions">
<option value="">Select...</option>
</select>
</form>
</body>
</html>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
When an item in the <select> menu is selected, the array element or object property represented by the selected option will be bound to the model identified by the ngModel directive.
Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.
For more information, see
AngularJS ng-options Directive API Reference
AngularJS API Reference - Using select with ngOptions and setting a default value
AngularJS ng-change Directive API Reference
I am trying to display a field based on the value of a select in my angular app. It should be very simple: when newJob.country === 'Remote' I want my 'city' field to disappear:
HTML:
<body ng-app>
<div class="form-aside">
<label>Location</label>
<select ng-model="newJob.country" class="form-control">
<option>Remote</option>
<option>France</option>
<option>UK</option>
</select>
</div>
<div class="form-aside" ng-if="newJob.country !== 'Remote'">
<label>City</label>
</div>
</body>
For some reason it's not working. Here is the plunker: http://plnkr.co/edit/GcJNePs9zvkejnIATTiw?p=preview
How can i make this work?
Thanks
You need to define a valuefor each <option> tag.
Then you need to use ng-show with != to dynamically display your label or not.
Your plunker should work with this:
<body ng-app>
<div class="form-aside">
<label>Location</label>
<select ng-model="newJob.country" class="form-control">
<option value="remote">Remote</option>
<option value="france">France</option>
<option value="uk">UK</option>
</select>
</div>
<div class="form-aside" ng-show="newJob.country != 'remote'">
<label>City</label>
</div>
</body>
Plunker here : http://plnkr.co/edit/meqpbOVXrH4ANtQlxdoy?p=preview
Your version of Angular doesn't support ng-if.
Try :
<div class="form-aside" ng-show="newJob.country != 'Remote'">
Or update your version of Angularjs to 1.2.15, the last stable version.
Ok, so, I got a list, and I want to show some text when the user SELECTS an option from the dropdown, I figured how to make for it for one option but for some reason doesn't work in groups so well.
<select id="mySelect" name="values">
<option value=0>0</option>
<option value=1>1</option>
<option value=2>2</option>
</select>
I intend to "print" some determined text as each option is selected, thanks!
(sorry for any grammar errors, spanish speaker here)
Managed to do it:
<script type="text/javascript">
function showstuff(element){
document.getElementById("una").style.display = element=="una"?"block":"none";
document.getElementById("dos").style.display = element=="dos"?"block":"none";
document.getElementById("tres").style.display = element=="tres"?"block":"none";
document.getElementById("cuatro").style.display = element=="cuatro"?"block":"none";
document.getElementById("cinco").style.display = element=="cinco"?"block":"none";
document.getElementById("seis").style.display = element=="seis"?"block":"none";
document.getElementById("siete").style.display = element=="siete"?"block":"none";
document.getElementById("ocho").style.display = element=="ocho"?"block":"none";
document.getElementById("nueve").style.display = element=="nueve"?"block":"none";
document.getElementById("diez").style.display = element=="diez"?"block":"none";
}
</script>
<select name="type" onchange="showstuff(this.value);">
<option value="una" selected>1</option>
<option value="dos">2</option>
<option value="tres">3</option>
<option value="cuatro">4</option>
<option value="cinco">5</option>
<option value="seis">6</option>
<option value="siete">7</option>
<option value="ocho">8</option>
<option value="nueve">9</option>
<option value="diez">10</option>
</select>
<div id="uno" style="display:none;">uno</div>
<div id="dos" style="display:none;">dos</div>
<div id="tres" style="display:none;">tres</div>
<div id="cuatro" style="display:none;">cuatro</div>
<div id="cinco" style="display:none;">cinco</div>
<div id="seis" style="display:none;">seis</div>
<div id="siete" style="display:none;">siete</div>
<div id="ocho" style="display:none;">ocho</div>
<div id="nueve" style="display:none;">nueve</div>
<div id="diez" style="display:none;">diez</div>
Thanks every one :)
Updated: I would like to control the visibility of the bottom divs based on the value of the top SELECT..
i.e
selected = dogs:: only bulldog, pitbull visible
selected = fish:: GOLDFISH! visible
etc..
Appreciate it.. Sorry I didn't do a better job of explaining my question initially -
<select>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="fish">fish</option>
</select>
<div id="dog">bulldog</div>
<div id="cat">stray cat</div>
<div id="dog">pitbull</div>
<div id="cat">alley cat</div>
<div id="fish">GOLDFISH!</div>
Try this
$('#pets').change(function() {
$('#somepets div').hide();
$('#somepets div.' + $(this).val()).show();
});
But for this you should change your class names to match the values of the options. Also you need to give your "select" element an ID.
EDIT: To clarify a bit, this selector is going to try and find the select element by its ID "pets" so you need to add id="pets". The name and ID can be the same value.
EDIT: Since you're having some trouble with the HTML here is what it would need to look like to work with my method.
<select id="pets">
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="fish">fish</option>
</select>
<div id="somepets">
<div class="dog">bulldog</div>
<div class="cat">stray cat</div>
<div class="dog">pitbull</div>
<div class="cat">alley cat</div>
<div class="fish">GOLDFISH!</div>
</div>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
function selectionChanged(){
HideAll();
var selected=$('#pets option:selected').text();
var selectString='.';
selectString+=selected;
$(selectString).show();
};
function HideAll(){
$('.dog').hide();
$('.cat').hide();
$('.fish').hide();
};
</script>
<select id="pets" onchange="selectionChanged()">
<option>dog</option>
<option>cat</option>
<option>fish</option>
</select>
<div id=somepets>
<div class="dog">bulldog</div>
<div class="cat">stray cat</div>
<div class="dog">pitbull</div>
<div class="cat">alley cat</div>
<div class="fish">GOLDFISH!</div>
</div>