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>
Related
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
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.
I have a field country. Some countries in the list like the US or Canada are divided into states. When such countries are selected, a second select appears and is required.
HTML:
<label>Country*</label>
<select name="country" class="gu3" ng-model="companyCriteria.country" ng-options="country.label for country in countries" required=""></select>
<div class="row" ng-show="stateAvailable">
<label>Province*</label>
<select name="state" class="gu3" ng-model="companyCriteria.state" required="">
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
</div>
Controller:
app.controller('CompanyController', function ( $scope, companies , Countries, States ... ) {
//...
$scope.countries = Countries;
$scope.states = [];
$scope.stateAvailable = false;
$scope.$watch( 'companyCriteria.country', function( after, before ) {
if ( searchCompanyCriteria.country && searchCompanyCriteria.country.div ) {
$scope.states = States.get( after.code );
$scope.stateAvailable = true;
} else {
$scope.states = [];
$scope.stateAvailable = false;
}
} );
$scope.search = function () {
if ( !$scope.companyForm.$valid ) return; //Returns when states are hidden
//Do search ...
};
the problem is that $scope.companyForm.$valid is false when the state select is hidden. I'm not sure how to proceed to code it in an angular and elegant way (without having to hack with the dom the jquery way).
Note: Angular v1.2.0-rc.3
Instead of ng-show use ng-if (assuming you're using angular 1.1.5 or higher):
<div class="row" ng-if="stateAvailable">
<label>Province*</label>
<select name="state" class="gu3" ng-model="companyCriteria.state" required>
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
</div>
Or, just use ng-required:
<select name="state" ng-model="companyCriteria.state" ng-required="stateAvailable">
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
You can use ng-required to resolve an angular expression and set the field to required:
<label>Country*</label>
<select name="country" class="gu3" ng-model="companyCriteria.country" ng-options="country.label for country in countries" required=""></select>
<div class="row" ng-show="stateAvailable">
<label>Province*</label>
<select name="state" class="gu3" ng-model="companyCriteria.state" ng-required="companyCriteria.country">
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
</div>
This will only require the state, if the country has been set with a value. However, you can put in any scoped expression here (so if you want to call a controller function returning a boolean, that would work as well).
The documentation for ng-required is here.