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/
Related
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 = [];
});
I am creating an example in AngularJs where I have 3 select box. When user select 1st option in first select box so same should not visible in 2 and 3 select box.
For example Men, Women, Child. So if I select Men in first select box same should not come in 2 and 3 select box.
Please guide and help. Below is my code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="carModel1" >
<option value="">Select</option>
<option ng-repeat="car in carList" value="{{car.modelNo}}" ng-show="car.isShow"> {{car.modelName}}</option>
</select>
<select ng-model="carModel2" >
<option value="">Select</option>
<option ng-repeat="car in carList" value="{{car.modelNo}}" ng-show="car.isShow"> {{car.modelName}}</option>
</select>
<select ng-model="carModel3" >
<option value="">Select</option>
<option ng-repeat="car in carList" value="{{car.modelNo}}" ng-show="car.isShow"> {{car.modelName}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carList = [
{isShow: true, modelName: "Fiesta", modelNo: "447"},
{isShow: true, modelName: "Maruti", modelNo: "442"},
{isShow: true, modelName: "Escape", modelNo: "445"}
];
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
<select ng-model="selectedName1">
<option ng-repeat="x in names" ng-if="x !== selectedName">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["men", "women", "children"];
});
</script>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
</body>
</html>
Try this
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/