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?
Related
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>
How to set the selected option from ajax call on page load
i get the zones by ajax call
so i want to trigger the change function of zones on page load and set the selected option of the cities select box
My snippet code:
<select class="form-control" name="zone_id" ng-model="zone_id" name="zone_id" ng-change="getSearchCities(zone_id)">
<option>Choose zone</option>
<option value="20" selected>Zone 1</option>
.....
</select>
<select class="form-control" name="city_id">
<option>choose city</option>
<option value="{{ city.city_id }}" ng-repeat="city in cities">
{{ city.name }}
</option
</select>
<script>
var SApp = angular.module('searchApp', []);
SApp.controller('searchCtrl', function($scope, $http) {
$scope.getSearchCities = function(zone_id) {
// alert(zone_id);
$http.get("zones.php?zone_id="+zone_id).then(function(response) {
$scope.cities = response.data.city;
});
}
});
</script>
I have found the answer finally and it is simply :
1-Use ng-options instead of ng-repeats the option tag
2-call the function getSearchCities
$scope.getSearchCities($scope.zone_id);
I am currently working on a CRM in angularJs and Firebase, but I need to get the variable from an ng-repeat such follows
<select class="form-control" id="sel1">
<option value="">--Choose an Account--</option>
<option class="dropdown" value="{{contact.account}}" ng-repeat="account in accounts">{{account.name}}</option>
</select><br />
Controller
$scope.addConct = function () {
var account = $scope.contact.account;
The accounts.name is working fine, it shows all the accounts. How can I get that account string and assign that String to my contact.account?
Thanks in advance.
Just add the ngModel directive to the select field to bind the value to a scope variable:
HTML
<select class="form-control" id="sel1" ng-model="someVariable">
<option value="">--Choose an Account--</option>
<option class="dropdown" value="{{contact.account}}" ng-repeat="account in accounts">{{account.name}}</option>
</select><br />
Controller
$scope.someVariable = '';
$scope.addConct = function () {
var account = $scope.contact.account;
};
Now you can access the value at any time with $scope.someVariable
More information on ngModel
I'm trying to create a dropdown list from an angular controller:
My html code:
<select>
<option value="" disabled selected >Choose your option</option>
<option ng-repeat="ty in type">{{ty.$value}}</option>
</select>
Controller code:
var typeRef = new Firebase(FIREBASE_URL + "/type");
var typeArray = $firebase(typeRef).$asArray();
typeArray.$loaded().then( function (data) {
$scope.type = data;
console.log(data);
});
In this case it works:
<ul id='dropdown2' class='dropdown-content'>
<li ng-repeat="ty in type">{{ty.$value}}</li>
</ul>
The ty.$value works in above code, but in this <select> tag doesn't show anything any idea why is that?
You don't need to use ng-repeat, you can use ng-options
<select ng-options="ty.$value for ty in type" ng-model="something">
<select>
Use
<select ng-options="ty.$value as ty.$value for ty in type" ng-model="achvtype"> <option value="" disabled selected >Choose your option</option> </select>
http://jsbin.com/juhamul/edit?html,js,output
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>