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 :)
Related
I am having a select tag as
<select ng-model="vm.fooModel"
ng-options="item.id as item.name for item in vm.fooOptions" >
<option value="none">Select</option>
</select>
The issue is that when this is getting rendered angular 1.6 is removing my default option and adding an empty option
<option value="?" selected="selected"></option>
My initial model value for "vm.fooModel" is "none" . ̶T̶h̶i̶s̶ ̶w̶a̶s̶ ̶w̶o̶r̶k̶i̶n̶g̶ ̶f̶i̶n̶e̶ ̶i̶n̶ ̶a̶n̶g̶u̶l̶a̶r̶ ̶1̶.̶5̶
Use the ng-repeat method for <select> options:
angular.module("app",[])
.controller("ctrl", function(){
var vm = this;
vm.fooModel="none";
vm.fooOptions=[
{id: 1, name:"one"},
{id: 2, name:"two"},
];
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl as vm">
<select ng-model="vm.fooModel">
<option value="none" disabled>Select</option>
<option ng-repeat="item in vm.fooOptions" ng-value="item.id">
{{item.name}}
</option>
</select>
value={{vm.fooModel}}
</body>
For more information, see AngularJS <select> Directive API Reference - Using ngRepeat to generate select options.
Add default option to array of options in controller.
angular.module("app", [])
.controller("ctrl", function() {
var vm = this;
vm.fooModel = "none";
vm.fooOptions = [{
id: "none",
name: "default"
},
{
id: 1,
name: "one"
},
{
id: 2,
name: "two"
},
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl as vm">
<select ng-model="vm.fooModel" ng-options="item.id as item.name for item in vm.fooOptions">
</select>
Select: {{vm.fooModel}}
</body>
<option ng-repeat="item in vm.fooOptions track by item.id" ng-value="item.id">
make use of track by in ng-repeat
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 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
Hello I have tried implementing the changes provided in several examples yet none seem to work. I do have an ng-model and I clearly define the property of the object I would to receive. However it still does not work.
Any help would be great.
HTML
<select chose ng-model="selected" ng-options="type as type.Name for type in ansExplanOpt">
<option value="">-- Select an Option --</option>
</select>
Controller
$scope.selected = ansExplanOpt.data;
The object is populating (I checked) and the properties it has are Name and Id.
Any help would be great. Thanks
You were very close. Just looks like a misuse of the ng-model value. Your code should be something like
<select chose ng-model="selectedValue" ng-options="type.Id as type.Name for type in ansExplanOpt">
</select>
And the ng-model will be what the user has selected.
Their documentation breaks it down well also:https://docs.angularjs.org/api/ng/directive/ngOptions
Here is solution:
ng-model is the value that user selected.
function TodoCtrl($scope) {
$scope.ansExplanOpt = [
{text:'learn angular', id:1},
{text:'build an angular app', id:2}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<select chose ng-model="select" ng-options="type as type.text for type in ansExplanOpt">
<option value="">-- Select an Option --</option>
</select>
{{select.text}}
<br>
{{select}}
</div>
</div>
You can define which element in the array you want to be preselected:
var myApp = angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {
$scope.data = [{
label: 'blah',
value: 'blah'
}, {
label: 'blah1',
value: 'blah1'
}, {
label: 'blah2',
value: 'blah2'
}];
$scope.sel = $scope.data[0];
}]);
html:
<div ng-controller="TestController">
{{sel}}
<select ng-model="sel.value" ng-options="d.value as d.label for d in data">
</select>
</div>
See jsfiddle for more details
I have the following dropdown select HTML tags
<label>Car:</label>
<select ng-model="params.CarName">
<option value="x" disabled="" selected="">Select Car...</option>
<option value="BMW">BMW</option>
<option value="Audi">Audi</option>
</select>
<label>Model:</label>
<select ng-if="params.CarName == 'BMW'" ng-model="params.CarModel" ng-change="PerfRpt()">
<option value="x" disabled="" selected="">BMW Sports</option>
<option value="BMW 328i">BMW 328i</option>
<option value="BMW Sports">BMW Sports</option>
</select>
<select ng-if="params.CarName == 'Audi'" ng-model="params.CarModel" ng-change="PerfRpt()">
<option value=" " disabled="" selected="">Audi Sports</option>
<option value="Audi i345">Audi i345</option>
<option value="Audi Sports">Audi Sports</option>
</select>
<select ng-if="params.CarName!= 'BMW' && params.CarName != 'Audi'">
<option>-</option>
</select>
As per the above code, this is wat it does, We have a dropdown to select Car. It is either BMW or Audi.
Depending on this selection, The Model dropdown will be shown. For e.g If we select Audi for Car in the first dropdown, then Audi i345 and Audi Sports will be shown as the dropdown in the 'Model' field.
Similarly, other options will be shown if we select BMW.
Now I am planning to put the Car data in DB along with Model data. Once the page loads, the data will be retrieved and displayed to the user for the 'Car' section. Once the car is selected, depending on the value of the car, its corresponding Model will be updated in the Model section then.
I can get the data from backend to frontend. I want to know how to display those values dynamically and not hardcode like I have done here.
I have the following response from database for the Car.
Results: Array[2]
0: Object
Car:BMW
1: Object
Car:Audi
You need an array with the Car Names, eg.
$scope.carNameOptions = [
'BMW'
'Audi'
];
Then you would do this:
<select ng-model="params.CarName">
<option value="">Select car...</option>
<option ng-repeat="car in carNameOptions" value="{{car}}">{{car}}</option>
</select>
I would suggest making params.CarModel an object with the keys being the CarNames, and the value an array with options for the car like above. Then you can do this:
<select ng-model="params.CarModel">
<option value="">Select model...</option>
<option ng-repeat="carModel in carModelOptions[params.CarName]" value="{{carModel}}">{{carModel}}</option>
</select>
eg
$scope.carModelOptions = {
'BMW' : [
'BMW 328i',
...
],
'Audi' : [...]
}
Since you have only the cars models stored in your database, you can retrieve them and then make a new array putting inside it the types, as follows:
(function() {
"use strict";
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
// From database
var data = [
'BMW',
'Audi'
];
$scope.cars = [
{
"model":"BMW",
"types":[
"BMW 328i",
"BMW Sports"
]
},
{
"model":"Audi",
"types":[
"Audi i345",
"Audi Sports"
]
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainCtrl">
<div class="col-md-12">
<select class="form-control" ng-options="car.model for car in cars" ng-model="carSelected">
<option value="" label="Select a car" hidden></option>
</select>
<select class="form-control" ng-disabled="!carSelected" ng-options="type for type in carSelected.types" ng-model="typeSelected">
<option value="" label="Select a type" hidden></option>
</select>
<hr>
Car selected: <pre ng-bind="carSelected | json"></pre>
Type selected: <pre ng-bind="typeSelected"></pre>
</div>
</body>
</html>
Note: I've used ngOptions directive, which one MUST be used for <select>, not ngRepeat.
I hope it helps.