I have an object with AllCountries and SelectedCoutry.
I want to list all countries on a <select> and select the option with ng-model by the value of SelectedCountry.
But the default value of combobox gets selected null.
Example:
angular.module('ngPatternExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.OBJ = {
"OBJ": {
"AllCountries": [
{
"country": "USA",
"id": 1
},
{
"country": "Mexico",
"id": 2
},
{
"country": "Canada",
"id": 3
}
],
"SelectedCountry": {
"country_id": 1,
}
}
}
$scope.AM = $scope.OBJ.OBJ;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ngPatternExample">
<div ng-controller="ExampleController">
selected country: {{AM.SelectedCountry.country_id}} <br/>
<select class="form-control" ng-model="AM.SelectedCountry.country_id">
<option value=""> --- </option>
<option ng-repeat="co in AM.AllCountries" value="{{co.id}}"> {{co.country}} </option>
</select>
</div>
</body>
(http://plnkr.co/edit/PI3tOrIMSTMwGC0rYA5q?p=preview)
p.s A good explanation why this doesnt work allways in Angular would be great
Replace your select with this
<select class="form-control" ng-options="co.id as co.country for co in OBJ.OBJ.AllCountries" ng-model="AM.SelectedCountry.country_id">
<option value=""> --- </option>
</select>
Use ngOptions directive instead of repeating options in the select box by yourself.
<select
class="form-control"
ng-model="AM.SelectedCountry.country_id"
ng-options="co.id as co.country for co in AM.AllCountries">
<option value=""> --- </option>
</select>
Updated plunk:
http://plnkr.co/edit/FZcJVkJQlbLM3k544s8S?p=preview
Related
I have an Edit Page there I have an drop down called Role, while inserting I sent a value (like 1 instead "Role Name") to db, while retrieving to edit page I couldn't able to initialize the selected text in drop down
below is my html code
<label class="adjust1-label-right">Role</label>
<select id="role" class="adjust-select-combo" ng-options="r.role_name for r in Role_Name track by r.roleid" ng-model="role">
<option ng-repeat="rol.roleid for rol in Role_Name" value="{{rol.roleid}}">{{rol.role_name}}</option>
</select>
I tried this but no luck
$scope.role = $scope.Role_Name[0];
My data looks like
[{"Role_Id":1,"User_Id":10001}]
Your binding won't work, because you are using ng-options in your select along with ng-repeat in your options, only one of them should be used.
And use ng-value instead of value, this is how should be your HTML binding:
<select id="role" class="adjust-select-combo" ng-model="role">
<option ng-selected="rol == role"
ng-repeat="rol in Role_Name"
ng-value="rol.Role_Id">{{rol.User_Id}}
</option>
</select>
Demo:
This is a working Snippet:
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
$scope.Role_Name = [{
"Role_Id": 1,
"User_Id": 10001
}, {
"Role_Id": 2,
"User_Id": 10002
}, {
"Role_Id": 3,
"User_Id": 10003
}];
$scope.role = $scope.Role_Name[1];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<html ng-app="app">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<body>
<div ng-controller="MainCtrl">
<select id="role" class="adjust-select-combo" ng-model="role">
<option ng-selected="rol == role"
ng-repeat="rol in Role_Name"
ng-value="rol.Role_Id">{{rol.User_Id}}
</option>
</select>
</div>
</body>
</html>
Have you tried with just using the ng-options
<select id="role"
class="adjust-select-combo"
ng-options="r.Role_Id as r.User_Id for r in Role_Name"
ng-model="role"></select>
To set the selected role
$scope.role = $scope.Role_Name[0].Role_Id;
I am using AngularJS. There are two select, the first is the "team select," the second is the "member select." If the "team select" have the members, the "member select" show " select the member ." If the "team select" don't have the members, the 'member select" show "no member."
My problem is how to change the default option of the "member select".
This is my code:
<script src="angular.js"></script>
<div class="bigDiv">
<select class="common_select" name="xxx" ng-options="item as item.teamname for item in team_array" ng-model="select_team" id="" ng-change="selectMemberFun(select_team)">
<option value="" disabled selected hidden>select a team</option>
</select>
<select class="common_select" name="xxxxx" id="" ng-options="item as item.name for item in select_team.members" ng-model="select_member">
<option ng-show="!have_member" value="" disabled selected hidden>no member</option>
<option ng-show="have_member" value="" disabled selected hidden>select a member</option>\
</select>
</div>
<script src="angular.js"></script>
<script>
angular.module('app',[]).controller('xxx',['$scope', function ($scope) {
$scope.have_member = false;
$scope.team_array = [
{teamname: "team1", members:[ {name:'team1member1'}, {name:'team1member2'}]},
{teamname: "team2", members:[ {name:'team2member1'}, {name:'team2member2'}]},
{teamname: "team3", members:[]},
];
$scope.selectMemberFun = function (team) {
if(team.members.length == 0){
$scope.have_member = false;
} else {
$scope.have_member = true;
}
}
}])
</script>
Why does the 'ng-show' directive not work ? The "member select" always shows "no member".
I've tried a few ways, looks like this one works.
angular.module('app', []).controller('TestController', ['$scope',
function($scope) {
$scope.have_member = false;
$scope.team_array = [{
teamname: "team1",
members: [{ name: 'team1member1' }, { name: 'team1member2' }]
}, {
teamname: "team2",
members: [{ name: 'team2member1' }, { name: 'team2member2' }]
}, {
teamname: "team3",
members: []
}, ];
$scope.selectMemberFun = function(team) {
if (team.members.length == 0) {
$scope.have_member = false;
} else {
$scope.have_member = true;
}
}
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div class="bigDiv" ng-app="app" ng-controller="TestController">
<select class="common_select" name="xxx" ng-options="item as item.teamname for item in team_array" ng-model="select_team" id="" ng-change="selectMemberFun(select_team)">
<option value="" disabled selected hidden>select a team</option>
</select>
<select class="common_select" name="xxxxx" id="" ng-options="item as item.name for item in select_team.members" ng-model="select_member">
<option value="" disabled selected hidden>{{have_member ? 'select a member' : 'no member'}}</option>
</select>
</div>
According to the documentation -> https://docs.angularjs.org/api/ng/directive/select
<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
<option value="">---Please select---</option> <!-- not selected / blank option -->
<option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
<option value="option-2">Option 2</option>
</select>
It doesn't work because ngOptions is like ngReapeat in that it will ONLY iterate when there are values in the select_team.members array. In Team3 the member array is empty, so all the inner <option></option> are skipped.
I am creating a web app in which i am using dropdown and angularjs for updating my database,
this is my syntax of my dropdownlist
<select ng-model="ucomname" ng-change="uucomname(o)">
<option ng-repeat="o in comnamelistfun" value="{{o.comname}}">{{o.comname}}</option>
</select>
first value in this dropdown is coming blank but i want the first value of my dropdown to be the first value of my dropdown, when i used ng-init i am not able to send the value in ng-model any idea?
You can use this.
http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
(function() {
'use strict';
angular
.module('app', [])
.controller('HomeCtrl', HomeCtrl);
HomeCtrl.$inject = ['$scope'];
function HomeCtrl($scope) {
$scope.cities = [
{ id: 1, name: 'London' },
{ id: 2, name: 'Chicago' },
{ id: 3, name: 'Moscow' },
{ id: 4, name: 'Mumbai' },
{ id: 5, name: 'Casablanca' }
];
// Pre-select city by id
$scope.selectedCityId = 1;
// Pre-select city by object
$scope.selectedCity = { id: 1, name: 'Casablanca' };
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="HomeCtrl">
<h3>Data List</h3>
<table>
<tbody>
<tr ng-repeat="city in cities">
<td>{{city.id}}</td>
<td>{{city.name}}</td>
</tr>
</tbody>
</table>
<h3>Selected City (by Id)</h3>
selectedCityId: <strong>{{selectedCityId}}</strong>
<br/>
<br/>
<label>Select City
<select ng-model="selectedCityId" ng-options="city.id as city.name for city in cities">
<option value="">-- Select City --</option>
</select>
</label>
<hr/>
<h3>Selected City (by object)</h3>
selectedCity: <strong>{{selectedCity}}</strong>
<br/>
<br/>
<label>Select City
<select ng-model="selectedCity" ng-options="city as city.name for city in cities track by city.id">
<option value="">-- Select City --</option>
</select>
</label>
<hr/>
<!-- Scripts -->
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="HomeCtrl.js"></script>
</body>
</html>
First in your Controller,
app.controller('cardController', ['$scope',
function($scope) {
$scope.ucomname = $scope.comnamelistfun[0]
}])
Then the select box is,
<select ng-model="ucomname" ng-change="uucomname(o)" ng-options="o for o in comnamelistfun">
</select>
This shld work for you.
Try this code.
<select ng-model="ucomname" ng-options= "o.comname for o in comnamelistfun track by o.comname">
</select>
and in your controller. Put this.
$scope.ucomname = $scope.comnamelistfun[0]; //This will select the first element.
I hope it should work :)
I'm currently using ui-select component in AngularJS.
<ui-select ng-model="tipData.category" search-enabled="false" name="category" required="required" class="orange-site-color-select custom-select">
<ui-select-match><span class="ui-select-result">{{$select.selected}}</span></ui-select-match>
<ui-select-choices repeat="tipcat in tipCategory"><span ng-bind-html="tipcat.name"></span></ui-select-choices>
</ui-select>
I'd like to know how can I implement auto select value displayed in that ui-select as retrieving data (just id) from database and displayed in that ui-select?
try this
<div ng-controller="DemoCtrl" ng-app="main">
<select ng-model="selectedCountry">
<option value="">Select Account</option>
<option ng-repeat="x in chooseCountries" value="{{x.countryId}}" >{{x.name}}</option>
</select>
</div>
And script code
var app = angular.module('main', []);
app.controller('DemoCtrl', function ($scope) {
$scope.chooseCountries=[
{countryId : 1, name : "France - Mainland", desc: "some description" },
{countryId : 2, name : "Gibraltar", desc: "some description"},
{countryId : 3, name : "Malta", desc: "some description"}
];
$scope.selectedCountry = $scope.chooseCountries[1].countryId.toString();
});
You can use selected property.
<div ng-controller="DemoCtrl" ng-app="main">
<select ng-model="selectedCountry">
<option value="">Select Account</option>
<option ng-repeat="x in chooseCountries" value="{{x.countryId}}" selected="{{x.name}}=Malta">{{x.name}}</option>
</select>
</div>
I have the following JSON file that lists Countries and their states :
[
{
"value": "Australia",
"text": "Australia",
"states": [
{
"value": "Australian Capital Territory",
"text": "Australian Capital Territory"
},
{
"value": "New South Wales",
"text": "New South Wales"
}
]
}
]
I load the data in a variable called countriesAndStates and then I display this on the frontend :
<div class="form-group">
<label for="country" class="col-sm-2 control-label">Country</label>
<div class="col-sm-3">
<select class="form-control" id="country" data-ng-model="project.country" data-ng-options="country.value as country.text for country in countriesAndStates">
<option disabled value="">Select</option>
</select>
</div>
</div>
<div class="form-group">
<label for="country" class="col-sm-2 control-label">State</label>
<div class="col-sm-3">
<select class="form-control" id="state" data-ng-model="project.state" data-ng-options="state.value as state.text for state in countriesAndStates.states" data-ng-disabled="!countriesAndStates.states">
<option disabled value="">Select</option>
</select>
</div>
</div>
I'm also loading data from a REST API to display it on the frontend :
var detailProject = Restangular.one('projects', $routeParams.projectId);
detailProject.get().then(function (project) {
$scope.project = project;
$scope.saveProject = function () {
project.put().then(processSuccess, processError);
};
});
Once I click on save, a saveProject function puts back the data to the API.
Now... How do I link up the states with the Countries?
From what I understood in the documentation, I would need to change the ng-model properties to reflect country and state... like so :
<select id="country" ng-model="states" ng-options=""></select>
<select id="state" ng-disabled="!states" ng-options=""></select>
But I'm a bit confused, how can I do that when I want the API data to be loaded in the select boxes?
I think something like this would work....
You can filter off the options by project.country. I also placed a ng-disabled directive to prevent them from selecting an option in this dropdown if they haven't selected a country first.
<select ng-disabled="!project.country" ng-model="selectedState"
ng-options="state.value as state.text for state in countriesAndStates.states | filter:{text: project.country}"></select>
After searching for hours... I finally figured it out. Posting this for everyone who might encounter the same issue.
I modified my data, splitting countries and states into 2 different files
Countries:
[
{ "name": "United States" },
{ "name": "Canada" }
etc...
]
States:
[
{ "name": "Alabama", "country": "United States" },
{ "name": "Alberta", "country": "Canada" }
etc...
]
Modified HTML
<select data-ng-model="project.country" data-ng-options="country.name as country.name for country in countries" data-ng-change="updateCountry()" class="form-control">
<option disabled value="">Select country</option>
</select>
<select data-ng-disabled="!project.country" data-ng-model="project.province" data-ng-options="state.name as state.name for state in states | filter:{country: availableStates}" class="form-control">
<option disabled value="">Select state</option>
</select>
Controller
$scope.updateCountry = function () {
$scope.availableStates = $scope.project.country; // filter by country
$scope.project.province = ''; // reset the province field to empty
};