<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>
JS code
<script>
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/"+banklist+, +name).then(function(response) {
$scope.data1 = response.newdata;
});
}
}]);
</script>
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....,I'm getting state value as null once i select the state..
Anyone please help how to append the third API?
Thank you
Related
I used ng-init inside Bootstrap model but it not initiating
<select class="form-control" ng-init="loadBankNames()">
<option value="">Select Bank</option>
<option ng-repeat="b in bank_list" value="{{b.bank_name}}">{{b.bank_name}}
</option>
</select>
$scope.loadBankNames = function(){
dmtService.getBankNames()
.then(function(data){
$scope.bank_list = data;
console.log($scope.bank_list);
});
}
I am new to angular and I am stuck...
I want to create a dropdown as shown in this image where the placeholder in the textbox depends on the selected option from the dropdown.
My html is
<select class="selectpicker" ng-options="search for search in searchCriteria" ng-model="searchWith">
<option value="">Select : </option>
</select>
<input type="text" ng-model="searchName" class="form-control" placeholder="Search with {{searchWith}}" />
My controller is defined as:
var companyInfo = angular.module('companyInfo', []);
companyInfo.controller('searchExample', ['$scope', '$http',function($scope, $http){
$scope.searchCriteria = ['Name', 'Employee Id', 'Designation', 'Email','Phone No']
$http.get("data/data.json").then(function(data){
$scope.employeeDetails= data.data;
});
$scope.searchInTable = function(searchName){
$scope.searchVal = searchName;
}
}]);
You can try this data-ng-change binds the event on change of select with the specified function
<select class="selectpicker" ng-options="search for search in searchCriteria" ng-model="searchWith" data-ng-change="search()">
<option value="">Select : </option>
</select>
<input type="text" ng-model="searchName" class="form-control" placeholder="Search with {{searchWith}}" />
and in your controller
$scope.search = function(){
$scope.searchName = $scope.searchWith;
}
Here is a simple Select done in Angular
<select ng-model="myCar">
<option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select>
I have the following in my scope in angular.js
$scope.cars = ["Toyota", "Ford", "Rolls"];
why isn't the options showing up, instead I get {{car}}
You can try this.
<select ng-model="myCar" ng-options = "car for car in cars" ng-init="myCar = 'Rolls'">
</select>
or this
<select ng-model="myCar" ng-init="myCar = 'Rolls'">
<option ng-repeat="car in cars" value={{car}}>{{car}}</option>
</select>
Your's code is working fine. Only the default value isn't selected, so at the beginning it shows blank.
Refer here.
HTML:
<div ng-app="app" ng-controller="test">
<select ng-model="myCar">
<option value="">Select</option>
<option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select>
</div>
JS:
var app = angular.module('app', []);
app.controller('test', function ($scope) {
$scope.cars = ["Toyota", "Ford", "Rolls"];
});
Beginner in AngularJS. I have a JSON string that has only dates which needs to be populated in html select. Below is what I tried.
JSON string would look like
[{"Dates":"04/10/2015"},{"Dates":"04/03/2015"},{"Dates":"02/20/2015"},{"Dates":"02/13/2015"},]
My JS would look like
<script>
var app = angular.module('myApp', []);
app.controller('dvDates', function ($scope, $http) {
$scope.Dates = [];
$http.post("Basics1.aspx/GetDates", { data: {} })
.success(function (data, status, headers, config) {
var results = JSON.parse(data.d);
$scope.Dates = results;
})
.error(function (data,status,headers,config) { });
});
</script>
HTML Code:
<div ng-app="myApp" ng-controller="dvDates">
<select ng-model="Dates" ng-options="item.Dates as item.Dates for item in Dates">
<option value=""> Select From Date</option>
</select>
</div>
The result is as below. Dropdownlist is shown properly.
<select class="ng-pristine ng-valid ng-touched" ng-options="item.Dates as item.Dates for item in Dates" ng-model="Dates">
<option value=""> Select From Date</option>
<option value="0" label="04/10/2015">04/10/2015</option>
<option value="1" label="04/03/2015">04/03/2015</option>
<option value="2" label="02/20/2015">02/20/2015</option>
<option value="3" label="02/13/2015">02/13/2015</option>
<option value="4" label="02/06/2015">02/06/2015</option>
<option value="5" label="01/30/2015">01/30/2015</option>
</select>
But when I select any value for this, the HTML changes as below and all the values wipes out.
<select class="ng-valid ng-dirty ng-touched" ng-options="item.Dates as item.Dates for item in AsOf" ng-model="Dates">
<option value="? string:01/30/2015 ?"></option>
<option value=""> Select From Date</option>
</select>
Please let me know what I'm doing wrong. The issue happens only with Dates. When I try with normal string to populate in Select, everything works as expected.
You need to change your model in select from
ng-model="Dates"
for somthign different ie
ng-model="selected.Date"
otherwise every time when you choose something from your select box, you overwrite your $scope.Dates model
angular.module("app", [])
.controller('homeCtrl', function($scope) {
$scope.Dates = [{
"Dates": "04/10/2015"
}, {
"Dates": "04/03/2015"
}, {
"Dates": "02/20/2015"
}, {
"Dates": "02/13/2015"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="homeCtrl">
<select ng-model="selected.Date" ng-options="item.Dates as item.Dates for item in Dates">
<option value="">Select From Date</option>
</select>
Selected : {{selected.Date}}
</div>
</body>
the select tab not get your data because you have been post method to get dates,Change it to get method and it will list all your dates in Json
Trying to get the options in the select field to use the IDs in an array as values.
HTML looks like this:
<select class="form-control" name="activitySelector"
ng-model="item"
ng-change="changeActivity()"
ng-options="activity.id as activity.value for activity in activities">
<option value="">Nothing selected</option>
</select>
Controller:
angular.module('myApp')
.controller('ActivityCtrl', function ($scope, $rootScope) {
$scope.activities = [
{"id":"54be7f8","value":"Add New Activity"},
{"id":"5407968","value":"Activity 1"}
];
$scope.item = "";
$scope.changeActivity = function() {
console.log($scope.item); //prints undefined
}
});
Generated HTML looks like this:
<select ng-options="activity.id as activity.value for activity in activities" ng-change="changeActivity()" ng-model="item" class="form-control ng-pristine ng-valid">
<option value="" class="">Nothing selected</option>
<option value="0">Add New Activity</option>
<option value="1">Activity 1</option>
</select>
Questions that I have so far:
1- Why $scope.item prints undefined?
2- Why the options would use a consecutive value instead of the ID provided?
You can modify your code as follows in order for your html to render as you wish:
<select class="form-control" name="activitySelector"
ng-model="item"
ng-change="changeActivity()"
ng-options="activity.value for activity in activities track by activity.id">
<option value="">Nothing selected</option>
</select>
And in your controller now, you should change as follows:
$scope.changeActivity = function() {
console.log($scope.item.id);
console.log($scope.item.value);
}
Here is the Plunker: http://plnkr.co/edit/DWobFzvas9x4lhaoNfTI.