I'm starting with AngularJS and tried to do a and get its value with Angular, but it doesn't work.
<div id="app_container" ng-controller="ArticlesController as control">
<select name="sortby" id="sortby" ng-model="sortBy"> {{sortBy}}
<option name="Date" value="Date">Date</option>
<option name="Vues" value="Vues">Vues</option>
<option name="Note" value="Note">Note</option>
<option name="Catégorie" value="Catégorie">Catégorie</option>
<option name="Tags" value="Tags">Tags</option>
</select>
<div>
Here I want to display the value of the select input, but it displays nothing. I can't access this value from the controller neither, and I don't understand why.
I have a ng-repeat on the same page that works perfectly well.
I even tried to copy past the example from angularjs.org, even this doesn't work...
Since you are using controller as syntax, you need to use ng-model="controlsortBy"
DEMO
var app = angular.module('testApp',[]);
app.controller('ArticlesController',function(){
var control = this;
control.print = function(){
console.log(control.sortBy);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<div id="app_container" ng-controller="ArticlesController as control">
<select name="sortby" id="sortby" ng-change="control.print()" ng-model="control.sortBy">
<option name="Date" value="Date">Date</option>
<option name="Vues" value="Vues">Vues</option>
<option name="Note" value="Note">Note</option>
<option name="Catégorie" value="Catégorie">Catégorie</option>
<option name="Tags" value="Tags">Tags</option>
</select>
<h1> {{control.sortBy}}</h1>
<div>
Related
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option}}">{{option.name}}</option>
</select>
The Above code works but it leaves me unable to retrieve the id field of the option element. See the different Plunker - working example with value={{option.id}} https://plnkr.co/edit/?p=preview - example with value={{option}} https://plnkr.co/edit/iEoHaSYLZbnwId8zHi9U?p=preview.
If I use ng-options in select it works - https://plnkr.co/edit/iEoHaSYLZbnwId8zHi9U?p=preview.
Do I need to filter ng-model?
You can't retrieve the id because by passing the option object in value you're converting it to a string, so data.model became "{"id":"1","name":"Option A"}". In order to pass the object use instead ng-value:
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" ng-value="{{option}}">{{option.name}}</option>
</select>
What I understand from your question the below code should work
<body ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<!--<select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option as option.name for option in data.availableOptions">-->
<!-- </select>-->
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr>
<tt>model = {{data.model}}</tt><br/>
</div>
</body>
This is my html code
<body ng-controller="myController">
<select ng-change="getData(currentSelected)" class="form-control" id="selection" ng-model="currentSelected" ng-options="selection as selection for selection in data">
<option value="" selected>Select the bankname</option>
</select>
<select ng-change="getData(currentSelectedstate)" class="form-control" id="selection" ng-model="currentSelectedstate" ng-options="my.state as my.state for my in newdata">
<option value="" selected>Select the state</option>
</select>
<select ng-change="getData1(currentSelecteddistrict)" class="form-control" id="selection" ng-model="currentSelecteddistrict" ng-options="my.district as my.district for my in data1">
<option value="" selected>Select the district</option>
</select>
</body>
And my js code is
var app=angular.module("mainApp",[]);
app.controller("myController", ["$scope", "$http",function ($scope,$http){
$http.get("company.in/ifsc/banklist").then(function(response){
$scope.data=response.data[0].data;
});
$scope.getData = function(name){
$http.get("company.in/ifsc/state/" +name).then(function(response) {
$scope.newdata = response.data;
});
}
$scope.getData1= function(name1){
$http.get("company.in/ifsc/district/""+name+", +name1).then(function(response) {
$scope.data1 = response.newdata;
});
}
}]);
First two api are working fine, When i select particular state in second drop down its not taking the value , How to append fetched bankname and state to the third api? so that i get the list of district in the third drop down.... , can anyone please help?
I am new to thymeleaf.
This is my select statement in thymeleaf
<select id="provider" class="form-control" th:onchange="'javascript:showPIIDoc();'">
<option th:value="0" >Select a Service Provider</option>
<option th:each="provider : ${user.providers}" name="name" th:value="${provider.id}" th:text="${provider.name}" >[name]</option>
</select>
this is my javascript
<script>
function showPIIDoc()
{
alert('in here');
}
</script>
After running on server i cannot see the alert. Please help me.
There is nothing special about your onchange attribute with the tag, that requires Thymeleaf.
Change it to
<select id="provider" class="form-control" onchange="showPIIDoc()">
<option th:value="0" >Select a Service Provider</option>
<option th:each="provider : ${user.providers}" name="name" th:value="${provider.id}" th:text="${provider.name}" >[name]</option>
</select>
<select id="from" multiple="multiple" name="list" ng-model="selectedVal">
<optgroup label= "{{geo.Geo}}" ng-repeat="geo in Geographies">
<option id="{{country.CountryKey}}" ng-repeat="country in geo.Country" ng-click="arrayPush()">{{country.CountryDescription}}</option>
</optgroup>
</select>
arrayPush() is not being called when I am clicking a specific option
$scope.arrayPush = function(){alert("Hello!");}
I just found-out the answer to my question
<select id="from" multiple="multiple" name="list" ng-model="selectedVal" ng-change="arrayPush()">
<optgroup label= "{{geo.Geo}}" ng-repeat="geo in Geographies">
<option id="{{country.CountryKey}}" ng-repeat="country in geo.Country" >{{country.CountryDescription}}</option>
</optgroup>
</select>
Instead of using ng-click in option, use an ng-model and ng-change in select. Works in both Chrome and IE
I'm fairly new to javascript and I'm trying to make an form for my website and I'm stuck on the javascript,
This is what I have:
<script type="text/javascript">
function hide(opt) {
if (getElementsByClassName(opt).style.display='none';){
getElementsByClassName(opt).style.display='block';
}
else{
getElementsByClassName(opt).style.display='none';
}
}
</script>
What I intended the script to do was recieve a variable (the option chosen by the user) and then reveal all the elements with the class of the same name (so if the option was orc the orc div would be displayed, but be hidden if the option chosen was elf etc.)
Html:
<form name="chargen" action="" method="post">
Name:<Input name="name" type="text" />
Gender:<select name="gender">
<option>Choose Gender...</option>
<option>Male</option>
<option>Female</option>
</select>
Species:<select name="species" onchange="hide(document.chargen.species.options[
document.chargen.species.selectedIndex ].value)">
<option> Choose Species...</option>
<option value="human">Human</option>
<option value="orc">Orc</option>
<option value="elf">Elf</option>
<option value="dwarf">Dwarf</option>
<option value="drow">Drow</option>
<option value="ent">Ent</option>
</select>
<div class="human" style="display:none;">
Sub Species:<select name="subspecies1">
<option>Norseman</option>
<option>Hellenic</option>
<option>Heartlander</option>
</select>
</div>
<div class="orc" style="display:none;">
Sub Species:<select name="subspecies2">
<option>Black Orc</option>
<option>Fel Orc</option>
<option>Green Orc</option>
</select>
</div>
<div class="human" style="display:none;">
Homeland:<select name="homeland1">
<option>Choose Homeland...</option>
<option value="citadel">Citadel</option>
<option value="wildharn">Wildharn</option>
<option value="Merith">Merith</option>
</select>
</div>
<div class="orc" style="display:none;">
Homeland:<select name="homeland2">
<option>Choose Homeland...</option>
<option value="1">Berherak</option>
<option value="2">Vasberan</option>
</select>
</div>
Unfortunately nothing happens when I change the contents of the species combobox (I've tried on multiple browsers) What am I doing wrong?
I realise that getElementsByClassName() is a HTML5 function, but according to the interwebs it is compatible with all major browsers.
Thanks for your time
getElementsByClassName returns an array, you must iterate on the result. And be careful to the = in tests (instead of ==).
But I suggest you have a look at jquery. Your life will be easier as what you want can be done as :
$('.human, .orc, .elf, .dwarf, .drow, .ent').hide();
$('.'+opt).show();
(see fiddle : http://jsfiddle.net/dystroy/2GmZ3/)