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
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 am working on something which requires to come up with different options for different selections as list in forms.
for example:
If I select DR9 in System field, it has to show only 100,400,500 clients. same for QR9 - only 400 and 500.
But in my case, it's showing(100,400,500,400,500) repetitively.
Here is my code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<select>
<div ng-switch="myVar">
<div ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</div>
<div ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</div>
</div>
</select>
</form>
</div>
</body>
</html>
You cant apply ng-switch to a div with options instead add ng-switch to a div and apply ng-switch-when to select
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<div ng-switch="myVar">
<select ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
<select ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</select>
<select ng-switch-default>
<option>100</option>
<option>400</option>
<option>500</option>
</select>
</div>
</form>
</div>
</body>
</html>
The template can be simplified by using the ng-options directive:
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.myVar = "PR3";
$scope.otherOptions = otherOptions("PR3");
$scope.updateOtherOptions = function(myVar) {
$scope.otherOptions = otherOptions(myVar);
};
function otherOptions(myVar) {
switch (myVar) {
case "DR9": return [100,400,500];
case "QR9": return [400,500];
default: return [100,400,500];
};
};
})
<!DOCTYPE html>
<html>
<script src="//unpkg.com/angular/angular.js"></script>
<body>
<div ng-app="app" ng-controller="ctrl">
Password Reset
<form>
<br>
<label>System:</label>
<select ng-model="myVar" ng-change="updateOtherOptions(myVar)">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br>
Client options={{otherOptions}}
<br>
<label>Client:</label>
<select ng-model="otherSel" ng-options="sel for sel in otherOptions">
<option value="">Select...</option>
</select>
</form>
</body>
</html>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
When an item in the <select> menu is selected, the array element or object property represented by the selected option will be bound to the model identified by the ngModel directive.
Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.
For more information, see
AngularJS ng-options Directive API Reference
AngularJS API Reference - Using select with ngOptions and setting a default value
AngularJS ng-change Directive API Reference
//test.js
$scope.popover = {
"title": "Title",
"content": "<select ><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>"
};
// index.html
<button type="button" class="btn btn-lg btn-primary" data-placement="bottom" data-animation="am-flip-x" data-html="true" bs-popover ="popover">Click to toggle popover
<br>
<small>(using an object)</small>
</button>
I am getting button. I am not able to get menu-items. how to popover the selection menu? on click make some alerts on click on menu items.
Thanks in Advance
Use uib-popover-html attribute. Try below.
<html ng-app="demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<h4>Dynamic</h4>
<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" popover-placement="right" class="btn btn-default">Popover With Template</button>
<button uib-popover-html="htmlPopover" popover-title="Choose" popover-placement="right" class="btn btn-default">HTML Popover</button>
<script type="text/ng-template" id="myPopove.html">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<select class="form-control"><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>
</div>
</script>
</div>
<script>angular.module('demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.htmlPopover = $sce.trustAsHtml('<select class="form-control"><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>');
$scope.dynamicPopover = {
content: 'Choose car',
templateUrl: 'myPopove.html',
title: 'Car list'
};
});</script>
</body>
</html>
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 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>