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>
Related
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>
I'm a very begginer in AngularJS(1.6) and I need to filter some results from a selected option.
I have to filter cities from states, and until there i'm doing fine. But then I need to filter and show the stores in this city on a list. Does anyone knows how to do It?
My code:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body data-ng-controller="testController">
<select id="state" ng-model="stateSrc" ng-options="state for (state, city) in states" ng-change="GetSelectedState()">
<option value=''>State</option>
</select>
<select id="city" ng-model="citySrc" ng-options="city for (city,store) in stateSrc" ng-change="GetSelectedCity()" ng-disabled="!stateSrc">
<option value=''>City</option>
</select>
<select id="city" ng-model="store" ng-options="store for store in citySrc" ng-disabled="!stateSrc || !citySrc">
<option value=''>Store</option>
</select>
<script>
angular
.module('myApp', [])
.run(function($rootScope) {
$rootScope.title = 'myTest Page';
})
.controller('testController', ['$scope', function($scope) {
$scope.states = {
'STATE_1': {
'City_1': ['Store_1', 'Store_2'],
'City_2': ['Store_3', 'Store_4']
},
'STATE-2': {
'City_3': ['Store_1', 'Store_2'],
'City_4': ['Store_3', 'Store_4']
}
};
$scope.GetSelectedState = function() {
$scope.strState = $scope.stateSrc;
};
$scope.GetSelectedCity = function() {
$scope.strCity = $scope.citySrc;
};
}
])
</script>
</body>
</html>
Thank's a lot!
It would be really helpful if you posted what your data source looks like. Assuming citySrc has objects containing arrays of stores, I would set a selectedCity in your controller when you call GetSelectedCity(), and then:
<ul>
<li ng-repeat="store in selectedCity.store">{{store}}</li>
</ul>
This will create list items for each store in your selectedCity object.
I would like to set a default value to my select component using angular ng-options
I have seen other topics about this question but i try to use it in my case but not solve..
So i have a select component
<select ng-options="dis.entidade.idEntidade as dis.entidade.nome for dis in distritos" ng-model="distrito.entidade.idEntidade" class="form-control">
<option></option>
</select>
and i would like to set a defaul value.
You can to set at no-model property. Example:
$scope.distrito.entidade.idEntidade = $scope.distritos[0].entidade.idEntidade;
angular.module('app', []).controller('select', function($scope) {
$scope.distrito = {};
$scope.distrito.entidade = {};
$scope.distritos = [{
entidade: {
nome: 'test1',
idEntidade: 1
}
}, {
entidade: {
nome: 'test2',
idEntidade: 2
}
}];
$scope.distrito.entidade.idEntidade = $scope.distritos[0].entidade.idEntidade;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="select">
<select ng-options="dis.entidade.idEntidade as dis.entidade.nome for dis in distritos" ng-model="distrito.entidade.idEntidade" class="form-control">
</select>
</div>
In your controller you can set $scope.distrito.entidade.idEntidade = "defaultValue". Your ng-model is the selected value, so if you don't initialize it in your controller, the value will be undefined. If you set a value to the relevant model during initialization, this will be the default selected value.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.somethingList = [];
$scope.somethingList.push("Something1");
$scope.somethingList.push("Something2");
$scope.somethingList.push("Something3");
$scope.selectedSomething = $scope.somethingList[0];
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-options="something for something in somethingList" ng-model="selectedSomething"></select>
</div>
</body>
</html>
<select ng-options="dis.entidade.idEntidade as dis.entidade.nome for dis in distritos" ng-model="distrito.entidade.idEntidade" class="form-control">
<option>THIS IS YOUR DEFAULT VALUE</option>
If you want to have a default value with some meaning you should do it in your controller, eg:
if (!$scope.distrito.entidade.idEntidade)
$scope.distrito.entidade.idEntidade = 'Some default value';
i have this controller with name of three color.
<script>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.color = [{
name: "Red"
},
{
name: "green"
},
{
name: "Blue"
}
];
}]);
</script>
I'd like to create 3 radio button who show the correspondig color and show on screen
<label>
<input type="radio" ng-model="color.name" value="red"> Red
<tt>color = {{color.name }}</tt>
</label>
i desire take the value directly from array and not from value. how i can do?
i have try with value="color.name" but don't run.
thank you.
All you need is a ng-repeat. here is a working sample.
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.colorName = "Blue";
$scope.colors = [{
name: "Red"
}, {
name: "green"
}, {
name: "Blue"
}];
}
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<label ng-repeat="color in colors">
<input type="radio" ng-model="$parent.colorName" ng-value="color.name" name="color-picker" />{{color.name}}
</label>
<tt>color = {{colorName}}</tt>
</div>
</div>
Or else using controllerAs Syntax you could do this.
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.colorName = "Blue";
$scope.colors = [{
name: "Red"
}, {
name: "green"
}, {
name: "Blue"
}];
}
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController as sc">
<label ng-repeat="color in colors">
<input type="radio" ng-model="sc.colorName" ng-value="color.name" name="color-picker" />{{color.name}}
</label>
<tt>color = {{sc.colorName}}</tt>
</div>
</div>
I'm struggling getting "selected" to work with 'track by' for Angular select element. I have the following select:
<select id="licenseType" ng-model="selectedLicense"
ng-options="key for (key, value) in licenseMap track by key"
ng-change="doUpdate()">
</select>
with this js:
$scope.selectedLicense = $scope.licenseMap["Please Select"];
The above js works when I get rid of 'track by key' - the initial selection gets preset. With 'track by key' in place the pre-selection is a blank. I need 'track by key' in place to get hold of selected value, it is the only thing that worked so far. I have tried teh following combination so far that did not work:
/*
var license = document.getElementById('licenseType');
license.options.selectedIndex = 1;
license.options[license.options.selectedIndex].selected = true;
$("#licenseType").val("Please Select");
$('#licenseType').children('option[value="1"]').attr('selected', true);
*/
I will most appreciate some help here getting it to work. Thank you.
do something like this: http://codepen.io/alex06/pen/XjarJd
div(data-ng-app="app")
div(ng-controller="appController")
select.form-control(ng-model="selectedItem", ng-options="option.value as option.name for option in typeOptions track by option.value" ng-init="selectedItem=typeOptions[0]")
(function(){
'use strict'
angular
.module('app', [])
.controller('appController', ['$scope', function($scope){
$scope.typeOptions = [
{ name: 'Feature', value: 'feature' },
{ name: 'Bug', value: 'bug' },
{ name: 'Enhancement', value: 'enhancement' }
];
}])
})()
The example is made in jade, but it's almost the same syntax.By the way, if you still want to work with an object instead of array you can also do this:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
angular.module('app', [])
.controller('IndexCtrl', ['$scope', function($scope) {
$scope.types = {
1: "value1",
2: "value2",
5: "value3"
};
}]);
</script>
</head>
<body ng-app="app" ng-controller="IndexCtrl">
<select ng-model="type" ng-options="k as v for (k, v) in types">
<option value="">Please select</option>
</select>
</body>
</html>