In AngularJS I am making an $http call to populate a dropdown box.
In some cases the dropdown box will have no options to choose from, which would be equivalent to the code below
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [];
});
</script>
Right now when I run this code the user just sees nothing.
I want to place a message in the dropdown box saying "No Data To Choose From".
In order to do this, do I have to bind the message as an ng-option or is there a cleaner way of doing it so it does not look like "No Data To Choose From" is a legit choice such as the code below makes it seem.
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["no data to choose from"];
});
</script>
Basically if there are no options I want to let the user know in the cleanest way possible without binding the alert message as an option in the dropdown.
Add an option tag with ng-if condition checking names.length inside select box. I added some button to populate/reset the select box data for testing this scenario.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [];
$scope.loadData = function(){
$scope.names = ['a', 'b', 'c'];
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
<option value="" ng-if="!names.length">No data to choose</option>
</select>
<button ng-click="loadData()">load selectbox data</button>
<button ng-click="names=[]">Reset</button>
</div>
I'd go for an error message next to / below the dropdown.
<select ng-model="selectedName" ng-options="x for x in names"></select>
<small ng-show="!names.length">No data to choose from</small>
...
app.controller('myCtrl', function($scope) {
$scope.names = [];
});
Related
I want to pre set my select box by using whole object available in my array. the text will be customized by using object fields as shown in below image
this is what I have tried so far
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="employee" ng-options="item as (item.name+' - '+item.post) for item in employees">
<option value="">select</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.employees = [{name:"Mehtab",post:"SE"}, {name:"Punit", post:"PM"}, {name:"Ashutosh", post:"SSE"}];
$scope.employee = {name:"Punit", post:"PM"};
});
</script>
</body>
</html>
Is this you want:
html:
<select ng-model="employee.name" ng-options='item.name as (item.name + " - " + item.post) for item in employees'>
<option value="">select</option>
JS:
$scope.employees = [
{name:"Mehtab",post:"SE"},
{name:"Punit", post:"PM"},
{name:"Ashutosh", post:"SSE"}
];
$scope.employee = {"name":"Punit","post":"PM"};
Working fiddle:
https://jsfiddle.net/rum25Lxz/
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;
drop down are blank i want auto selected value Richard how do this, i am new in angular
<select class="form-control" name="customer" id="customer" ng-model="postjobcustomerCtrl.selectedCustomer" ng-options="customer.full_name for customer in postjobcustomerCtrl.atlasCustomers | filter:{full_name: Profile.full_name} track by customer.user_id"
ng-change="postjobcustomerCtrl.selectDefaultAddress()" required></select>
You'll want to use Angular's ng-Init to set a selected value inline.
<select class="form-control" name="customer" id="customer" ng-model="postjobcustomerCtrl.selectedCustomer" ng-options="customer.full_name for customer in postjobcustomerCtrl.atlasCustomers | filter:{full_name: Profile.full_name} track by customer.user_id"
ng-change="postjobcustomerCtrl.selectDefaultAddress()" ng-init="postjobcustomerCtrl.selectedCustomer = 'Richard'" required></select>
If you have the following...
<select ng-model="item">
<option value="1">Bob</option>
<option value="2">James</option>
<option value="3">Karl</option>
</select>
... and you want James to be picked by default, then in the angular controller, you just do this:
$scope.item = 2;
Like so:
angular.module('app', [])
.controller('ctrl', function($scope){
$scope.item = 2;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="item">
<option value="1">Bob</option>
<option value="2">James</option>
<option value="3">Karl</option>
</select>
</div>
All you need to do is to initialize your model with appropriate value("Richard") here to to get default value
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope, $http, uiGridConstants) {
$scope.postjobcustomerCtrl ={};
$scope.postjobcustomerCtrl.atlasCustomers =[{"full_name":"Richard"},{"full_name":"Colins"},{"full_name":"Steve"}];
$scope.postjobcustomerCtrl.selectedCustomer =$scope.postjobcustomerCtrl.atlasCustomers[0]
$scope.postjobcustomerCtrl.selectDefaultAddress =function(){
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app ="app" ng-controller="MainCtrl">
<select class="form-control" name="customer" id="customer" ng-model="postjobcustomerCtrl.selectedCustomer" ng-options="customer.full_name for customer in postjobcustomerCtrl.atlasCustomers"
ng-change="postjobcustomerCtrl.selectDefaultAddress()" required></select>
</div>
myApp.Controller("MyCltr, function($scope){
// first fetch data from db
// bind data to drop-down
// then set selected value.
$scope.postjobcustomerCtrl.selectedCustomer = "Richard";
});
And please make sure once your drop-down is binded with data after that set this value.
In your postjobcustomerCtrl, initialize the select ng-model (postjobcustomerCtrl.selectedCustomer) with the id of Richard.
// angularjs controller
atlasCustomers = [{full_name : "Richard", user_id: 1}]
postjobcustomerCtrl.selectedCustomer = atlasCustomers[0].atlasCustomers.user_id;
I have the following Angular code in my HTML file.
I have a drop-down box with two fixed choices: A and B.
The user must select either A or B. It cannot be left blank.
I would like the default selection to be A. How can I do it?
The following code starts off with an empty drop-down box. I don't want that. I want A to be pre-selected.
<div ng-controller="MyController as myCtrl">
<select ng-model="myCtrl.param1">
<option value="a" selected>A</option>
<option value="b">B</option>
</select><br/>
<button ng-click="myCtrl.submit()">submit</button>
</div>
You can declare a variable in your controller as follows:
$scope.myCtrl.param1 = 'A';
Working fiddle: https://jsfiddle.net/n9tL7cdr/2/
The following illustrates the ways, by which one can do it:
Option 1: (by adding ng-selected="true")
HTML:
<div ng-app="app" ng-controller="MyController as myCtrl">
<select ng-model="myCtrl.param1">
<option value="a" ng-selected="true">A</option>
<option value="b">B</option>
</select><br />
<button ng-click="myCtrl.submit()">submit</button>
</div>
JS:
var app = angular.module('app', []);
app.controller('MyController', function ($scope) {
var myCtrl = this;
myCtrl.submit = function () {
/*..*/
}
$scope = myCtrl;
});
Option 2: (by setting the variable in the controller)
HTML:
<div ng-app="app" ng-controller="MyController as myCtrl">
<select ng-model="myCtrl.param1">
<option value="a">A</option>
<option value="b">B</option>
</select><br />
<button ng-click="myCtrl.submit()">submit</button>
</div>
JS:
var app = angular.module('app', []);
app.controller('MyController', function ($scope) {
var myCtrl = this;
myCtrl.submit = function () {
}
myCtrl.param1 = "a";
$scope = myCtrl;
});
If you do not want to pre-select any, but show a label then ->
Option 3: (by just showing a 'Select' label - no pre-select in this case)
HTML:
<div ng-app="app" ng-controller="MyController as myCtrl">
<select ng-model="myCtrl.param1">
<option value="">Select</option>
<option value="a">A</option>
<option value="b">B</option>
</select><br />
<button ng-click="myCtrl.submit()">submit</button>
</div>
JS:
var app = angular.module('app', []);
app.controller('MyController', function ($scope) {
var myCtrl = this;
myCtrl.submit = function () {
}
$scope = myCtrl;
});
You need to use ng-selected and based on key you can keep selected or not selected items for e.g
<md-select ng-model="sms.from" ng-change="getSelectedValue(sms.from, 'from')">
<md-option ng-repeat="(i,item) in fromNumber" ng-value="item" ng-selected="i == 0 ? true:false">{{ item }}</md-option>
</md-select>
I have an array like so
[
{"id":"+7940","name":"Abkhazia"},
{"id":"+93","name":"Afghanistan"},
{"id":"+355","name":"Albania"},
{"id":"+213","name":"Algeria"}
]
etc...
My select looks like this
<select ng-model='person.contactCountryCode'
ng-options='c.id as c.name + " " + c.id for c in countryCodes'>
<option value=""> - Code -</option>
</select>
What I am trying to do is display the ID as the selected value rather than the name.
I've tried juggling around with the ng-options but I can't quite seem to get it.
Any help would be much appreciated!
HTML
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select ng-model="selected"
ng-options="c.id for c in person">
</select>
<span>{{selected.name}}</span>
</fieldset>
</div>
Controller
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.person = [
{"id":"+7940","name":"Abkhazia"},
{"id":"+93","name":"Afghanistan"},
{"id":"+355","name":"Albania"},
{"id":"+213","name":"Algeria"}
];
});
When you select an Id, the corresponding name will be displayed.
Here's a fiddle: http://jsfiddle.net/KN9xx/814/