I have the following code in the main page of my angular app that refuses to populate:
<div ng-app="MyApp" ng-controller="MyController">
<select
class="form-control"
ng-model="selected"
ng-options="x.value for x.display in options"
>
</select>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("MyController", function($scope) {
$scope.options = [
{ value: "ADVISORY", display: "Advisory Conflict Check" },
{ value: "OTHER", display: "Other Conflict Check" }
];
$scope.selected = $scope.options[0];
});
</script>
Can you tell me where I'm going wrong? I'm new to Angular.
EDIT:
I now know the difference between angular and angular.js. :)
I got my code working with this HTML:
<select class="form-control" [(ngModel)]="conflictType" (ngModelChange)="updateConflictType($event)">
<option *ngFor="let option of conflictTypes"
[value]="option.Value">{{option.Display}}</option>
</select>
I was able to move my data to my "code-behind" for lack of a better term.
Looks like you're using AngularJS and have wrongly tagged the question with angular. Or at least that's what's evident from your syntax which is in AngularJS.
Keeping that in mind here's an answer that will help you achieve this both in AngularJS as well as in Angular:
In AngularJS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<select class="form-control" ng-model="selected" ng-options="x.value as x.display for x in options">
</select>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("MyController", function($scope) {
$scope.options = [{
value: "ADVISORY",
display: "Advisory Conflict Check"
},
{
value: "OTHER",
display: "Other Conflict Check"
}
];
$scope.selected = $scope.options[0];
});
</script>
</body>
</html>
There's an issue with your ng-options syntax. ng-options="x.value for x.display in options" should have been ng-options="x.value for x in options" or ng-options="x.value as x.display for x in options"
In Angular:
You can use the *ngFor syntax to repeat through the options you want to provide as select options. Here's how you Component Class would look like in that case:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selected = 'ADVISORY';
options = [{
value: "ADVISORY",
display: "Advisory Conflict Check"
},
{
value: "OTHER",
display: "Other Conflict Check"
}
];
}
And in your Template:
<select [(ngModel)]="selected">
<option value="null" disabled>Select an option</option>
<option
*ngFor="let option of options"
[value]="option.value">
{{ option.display }}
</option>
</select>
Here's a Working Sample StackBlitz for your ref.
It should be ng-options="x.value as x.display for x in options" if you want the NgModel selected to contain the selected x.value. If you want the NgModel selected to contain the complete selected object then use ng-options="x as x.display for x in options"
Here's a working example
var app = angular.module("MyApp", []);
app.controller("MyController", function($scope) {
$scope.options = [
{ value: "ADVISORY", display: "Advisory Conflict Check" },
{ value: "OTHER", display: "Other Conflict Check" }
];
$scope.selected = $scope.options[0].value;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<select
class="form-control"
ng-model="selected"
ng-options="x.value as x.display for x in options">
</select>
</div>
Related
How to put some additional value with ngModel
If I have an html
<select ng-model="forms.options" data-custom-select="">
<option value="value1" data-special-value="reference1">Value 1</option>
<option value="value2" data-special-value="reference2">Value 2</option>
<option value="value3" data-special-value="reference3">Value 3</option>
</select>
and a custom directive "customSelect" with requires ngModel
I'm expecting a value on ngModel
{value:<Selected Value>,reference:<data-special-value>}
Is this really possible?
You can add the object directly into ng-options and get your result in the selected modal.
using ng-options:
<!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="option.value for option in options" ng-change="selected(option.reference)">
</select><br>
Selected Value: {{selectedName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.options = [
{ value: 'value1', reference: 'reference1' },
{ value: 'value2', reference: 'reference2' },
{ value: 'value3', reference: 'reference3' },
]
});
</script>
<p>Select a value from dropdown.</p>
</body>
</html>
Please run the above snippet
HERE IS A WORKING DEMO
I have an array like $scope.years = ['1900', '1901', '1902'];
If I use <select ng-model="chosenYear" ng-options="choice for choice in years"></select>
I get
<option value="0">1900</option>
<option value="1">1901</option>
<option value="2">1902</option>
where index of the array becomes the 'value' of options. How can I have both value and label equal (both being 1900, 1902, 1902, etc) ?
A similar question has an accepted answer, but it doesn't do this thing at all.
Angular version : 1.2.16
What you want is <select ng-model="chosenYear" ng-options="choice as choice for choice in years"></select>
EDIT:
since above does not work in angular 1.2.16 try below
<select ng-model="chosenYear" ng-options="choice for choice in years track by choice"></select>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.years = ['1900', '1901', '1902'];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="chosenYear" ng-options="choice for choice in years track by choice"></select>
</div>
</body>
</html>
look at this, is similar with your case or you can just use ng-repeat and create value dynamically<option ng-repeat="option in selecteOptions" value="option">{{option}}</option>
Try this
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.years = [{
label: "1900",
value: "1900"
}, {
label: "1901",
value: "1901"
}, {
label: "1902",
value: "1902"
},
];
});
<!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">
<p>Select a year:</p>
<select name="mySelect" id="mySelect" ng-options="option.label for option in years track by option.value" ng-model="selectedCar"></select>
<h1>You selected: {{selectedCar.label}}</h1>
</div>
</body>
</html>
If you don't mind using ng-repeat, use this instead:
<select ng-model="selectedItem">
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
I have a select drop down in Angular based HTML like below. The requirement is to filter the drop down values based on the text the user enter in a text input box. The drop down value in this select is op
How do I add the filter.
<select class="form-control" size="12" data-ng-model="selItem.SelectedItems"
ng-options="option as displaycodeandlabel(option,selItem.isCodeonLabel)disable when option.disabled==true for option in ::a.sData"></select>
Not sure about your data structure, but generally you can just use the native filter.
Here's a working demo:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.a = {};
$scope.a.sData = [
{
"vm":"0000",
"dm":"U.S. city average",
"disabled":false
},
{
"vm":"0100",
"dm":"Northeast urban",
"disabled":false
},
{
"vm":"0200",
"dm":"Midwest urban",
"disabled":false
}
];
$scope.displayCodeandLabel = function(item, displayCode) {
return displayCode ? item.vm + " " + item.dm : item.dm;
}
}
})();
<!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.6/css/bootstrap.min.css">
</head>
<body ng-controller="MainCtrl">
<div class="col-md-12">
<label for="search">Search</label>
<input type="text" id="search" class="form-control" placeholder="Search" ng-model="search">
<hr>
<select class="form-control" size="12" data-ng-model="selItem.SelectedItems" ng-options="option as displayCodeandLabel(option, selItem.isCodeonLabel)
disable when option.disabled == true for option in a.sData | filter: search"></select>
</div>
</body>
</html>
I have a select element and would like to allow the user to click an add button add additional select elements so that the user can continue to select additional items.
When I use the code below, the dropdown does not display and no additional select elements are added when I click the "Add" button.
Any suggestions on how to do this correctly?
Clarification: I want to add new dropdowns that always include the same items. So I want to add new select elements, not new items within a select element.
HTML:
<select ng-repeat="class in project.classes" class="form-control" id="class" name="class"
ng-model="editProject.project.class" ng-options="classid.class group by classid.code for classid in editProject.classids track by classid.class">
<option value="">--Select Class--</option>
</select>
<button ng-click="editProject.project.class.push({})">Add</button>
Controller:
var editProject = this;
editProject.project.class = [];
editProject.classids = [
{code: '1', class: 'Chemicals'},
{code: '2', class: 'Paints'},
// . . .
];
I create this for you, I hope this helps you.
<!DOCTYPE html>
<html ng-app="dynamicallySelect" ng-controller="ExampleController">
<head>
<title>My ParseApp site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</head>
<body>
<div ng-repeat="select in selects">
<select name="{{select.name}}" ng-model="select.model" multiple>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
multipleSelect[{{$index}}] = {{select.model}}
</div>
<button ng-click="addMultipleSelect()">add select</button>
<script>
angular.module('dynamicallySelect', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.selects = [];
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1'
};
$scope.addMultipleSelect = function() {
var newSelect = {
name: "multipleSelect",
model: "multipleSelectModel"
}
$scope.selects.push(newSelect);
}
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
}
]);
</script>
</body>
</html>
Inside the <div> where you are using for multi select you can use ui-select2="multi" ng-model="editProject.project.class", then you can write the select model value what you want in your drop down inside that <div>.This will mostly workout.
Your directive is set up incorrectly.
<select ng-model="editProject.project.class">
<option ng-repeat="class in project.classes" value="{{class.code}}">{{option.class}}</option>
</select>
<button ng-click="project.classes.push({class: 'New Class'})">Add Select</button>
When the page loads I want the select option to select the value set for the ng-model. Right now, it does not. When I change the value in the input box it does change the dropdown value too.
http://plnkr.co/edit/wOXkmXpLUCkzL5EYuP0W?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example94-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body ng-app="selectExample">
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.cars = [
'Honda','Tesla','BMW','Toyota'
];
$scope.myObj = {
myColor:'13',
myCat:'Tesla'
};
$scope.GetColorByCar=function(){
if($scope.myObj.myCat === 'Honda'){
$scope.colorsByCar = [
{name:'black', id:11,bt:'Honda'},
{name:'white', id:12,bt:'Honda'}];
} else {
$scope.colorsByCar = [
{name:'xyz black', id:11,bt:'Tesla'},
{name:'red', id:201,bt:'Tesla'},
{name:'blue', id:301,bt:'Tesla'},
{name:'yellow', id:411,bt:'BMW'}
];
}
};
}]);
</script>
<div ng-controller="ExampleController">
<input ng-model="myObj.myCat">
<input ng-model="myObj.myColor"><br>
Cars:
<select ng-model="myObj.myCat" ng-click="GetColorByCar()">
<option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select><br>
Colors:
<select ng-model="myObj.myColor" ng-options="color.id as color.name for color in colorsByCar"></select><br>
Currently selected: {{myObj.myCat}}
Currently selected: {{myObj.myColor}}
</div>
</body>
</html>
You need to do a few of things for this to work
Change the select to use ngOptions
<select ng-model="myObj.myCat" ng-options="car for car in cars" ng-click="GetColorByCar()"></select>
Then myObj.myCat needs to reference the cars array
$scope.myObj = {
myColor: '201',
myCat: $scope.cars[1]
};
Lastly you will need to watch for changes on myObj.myCat and run the code when it changes
$scope.$watch('myObj.myCat', function() {
...
}
Here is the update plunker: http://plnkr.co/edit/Gl7vcBp4MpAJgtycQLUn?p=preview
I've fixed your code, use the $watch function for these kind of things. Like this:
Example
<body ng-app="selectExample">
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.cars = [
'Honda','Tesla','BMW','Toyota'
];
$scope.myObj = {
myColor:'13',
myCat:'Tesla'
};
$scope.$watch('myObj.myCat', function(newVal){
if(newVal === 'Honda'){
$scope.colorsByCar= [
{name:'black', id:11,bt:'Honda'},
{name:'white', id:12,bt:'Honda'}];
} else {
$scope.colorsByCar= [
{name:'xyz black', id:11,bt:'Tesla'},
{name:'red', id:201,bt:'Tesla'},
{name:'blue', id:301,bt:'Tesla'},
{name:'yellow', id:411,bt:'BMW'}
];
}
});
}]);
</script>
<div ng-controller="ExampleController">
<input ng-model="myObj.myCat">
<input ng-model="myObj.myColor"><br>
Cars:
<select ng-model="myObj.myCat">
<option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select><br>
Colors:
<select ng-model="myObj.myColor" ng-options="color.id as color.name for color in colorsByCar"></select><br>
Currently selected: {{myObj.myCat}}
Currently selected: {{myObj.myColor}}
</div>
</body>