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
Related
I have a select box which bind the data from the database.
<div class="select__wrapper-inner" data-ng-init="loadCountries()">
<select id="country" ng-model="selectedCountry"
ng-options="country.CountryName for country in countries">
<option value="" selected>Select your option</option>
</select>
</div>
Below is the loadCountries function
$scope.loadCountries = function () {
var resultList = mainService.loadCountries();
resultList.then(function (response) {
$scope.countries = response.data;
$scope.selectedCountry = $scope.countries[0];
});
}
Also here is the loadcountires code in service
function mainService($http) {
this.loadCountries = function () {
var result = $http({
method: 'GET',
url: '/API/Country/Countries'
});
return result;
}
}
When I checked countries list, it is populating succesfully, but not binding to ng-options in the select box.
Can anyone help me with this please !!
Change ng-options like this and try.
<div class="select__wrapper-inner" data-ng-init="loadCountries()">
<select id="country" ng-model="selectedCountry"
ng-options="country as country.CountryName for country in countries">
<option value="" selected>Select your option</option>
</select>
</div>
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;
}
<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
I am getting the response as below and I would like to adjust those in select option tag. How can I set those please suggest the same
[null,"a","b","c ","d"]
My code is like
$http.get('v1/sport').success(function(data) {
$scope.sports = [];
//$scope.sports = data.data;
angular.forEach(data.data, function(value, key) {
$scope.sports[value.sport_id] = value.name;
});
});
In view
<select name="teamSport"
ng-model="player.sport_id"
ng-options="sport[player.sport_id] as sport[player.name] for sport in sports"
ng-change="changedSport()"
required>
<option value="" selected="selected">-- Select --</option>
</select>
Using ng-repeat and ng-model like this
<select ng-model='value'>
<option ng-repeat='option in options'>
{{option}}
</option>
</select>
$http.get('v1/sport') .success(function (data) { $scope.sports = []; angular.forEach(data.data, function(value, key){ $scope.sports[value.sport_id] = value.name; }); });
$http.get('v1/selectedSport') .success(function (data) { $scope.selectedSport = data; });
And the view
<select
ng-model="selectedSport"
ng-options="sport[player.sport_id] as sport[player.name] for sport in sports">
</select>
You can directly use the data without converting it using forEach.
Here is the script which will render the dropdown using the data you gave in the comment [{"sport_id":"1","name":"a"},{"sport_id":"2","name":"b"},{"sport_id":"3","name":"c"},{"sport_id":"4","name":"d"}]
You can set the selected in the $scope.selected variable.
var myApp = angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.sports = [{"sport_id":"1","name":"a"},{"sport_id":"2","name":"b"},{"sport_id":"3","name":"c"},{"sport_id":"4","name":"d"}];
$scope.selected = $scope.sports[2];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController">
{{selected}}
<select name="teamSport"
ng-model="selected"
ng-options="sport as sport.name for sport in sports"
ng-change="changedSport()"
required>
<option value="" selected="selected">-- Select --</option>
</select>
</div>
</div>
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.