I have read several posts on this issue and the solutions given on this site don't seem to work for me. I have a select box with several options and I need a default value to be show to the user. Currently no option is selected. What could be wrong with this code.
HTML
<select class="form-control input-sm" name="collegeTranscripts1" id="collegeTranscripts1" data-ng- model='transcriptCAdata.typeAccepted' data-ng-options='option.value as option.name for option in typeOptions1'></select>
JS
$scope.typeOptions1 = [
{ name: 'Please Select', value: 'selected' },
{ name: 'Official', value: 'OFFICIAL' },
{ name: 'Unofficial', value: 'UNOFFICIAL' },
{ name: 'None', value: 'NONE' }
];
$scope.form = {type : $scope.typeOptions1[0].value};
There are a couple of problems that I see in your code:
The HTML attribute data-ng-model is separated, it looks like this: data-ng- model='transcriptCAdata.typeAccepted'.
Another is that in your model, you are using a scope attribute transcriptCAdata.typeAccepted but you didn't declare it in your controller. What I see in your controller though is $scope.form = {type : $scope.typeOptions1[0].value};.
You simply have to change your data-ng-model to data-ng-model="form.type".
DEMO
angular.module('app', [])
.controller('Ctrl', function($scope) {
$scope.typeOptions1 = [
{ name: 'Please Select', value: 'selected' },
{ name: 'Official', value: 'OFFICIAL' },
{ name: 'Unofficial', value: 'UNOFFICIAL' },
{ name: 'None', value: 'NONE' }
];
$scope.form = {type : $scope.typeOptions1[1].value};
});
<div ng-app="app" ng-controller="Ctrl">
<select class="form-control input-sm" name="collegeTranscripts1"
id="collegeTranscripts1" data-ng-model='form.type'
data-ng-options='option.value as option.name for option in typeOptions1'>
</select>
{{form.type}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
UPDATE:
I have copied the PLUNKER you have provided and revised it, since it had problems in it.
Related
I'm trying to replace a select with radio buttons - but when I swap to radio buttons I loose my initial selection and the selecting breaks.
$scope.selection = Address.get(); // { id: 1, name: "Home" };
$scope.addresses = Address.query(); // [{ id: 1, name: "Home" }, { id: 2, name: "Work" }];
From (in this sample the select has "Home" selected):
<select class="form-control" ng-model="selection"
ng-options="address.street for address in addresses track by address.id">
</select>
To (in this sample the radio button for "Home" is not selected):
<div ng-repeat="address in addresses track by address.id">
<label>
<input type="radio" ng-value="address" ng-model="selection" />
<span>{{address.name}}</span>
</label>
</div>
Fiddle: https://jsfiddle.net/xczdcqx0/7/
EDIT:
I need the selection to reflect the id and name after changes:
<span>Selection:</span> <span>{{selection.name}} - {{selection.id}}</span>
Try this instead (for you radio input). Turns out that the ng-repeat is what's throwing it off (you needed to use $parent.selection):
<input type="radio" ng-value="address" ng-model="$parent.selection"/>
I think it's working the way you'd hope with this update to your fiddle
Initial Value
Jeez. I feel like an idiot, but I finally figured out that angular has no way of telling that your initial "selection" is the same as address[0].
So - I had to change the way you set $scope.selection as well:
app.controller("SampleController", ['$scope', function($scope) {
$scope.addresses = [
{ id: 1, name: "Home" },
{ id: 2, name: "Work" },
];
$scope.selection = $scope.addresses[0];
}]);
Now we're all set. Sheesh ... that was one of those "hiding in plain sight" bugs...
The value and model should be a string according to the input[radio] docs:
<input type="radio" ng-value="address.name" ng-model="selection.name" />
JSFiddle Demo: **https://jsfiddle.net/xczdcqx0/2/
Source:
<div ng-repeat="address in addresses track by address.id">
<label>
<input type="radio" ng-checked="checked(address)" ng-click="click(address)" />
<span>{{address.name}}</span>
</label>
</div>
Controller:
app.controller("SampleController", ["$scope", "Address", function($scope, Address) {
$scope.selection = Address.get(); // { id: 1, name: "Home" };
$scope.addresses = Address.query(); // [{ id: 1, name: "Home" }, { id: 2, name: "Work" }];
$scope.checked = function(address) {
return address.id === $scope.selection.id;
};
$scope.click = function(address) {
$scope.selection = address;
};
}]);
Note: extracted partially from solutions provided by #bri.
I have option element in select:
$scope.countries = {0 : 'Select country...'};
And ng-model="selected" is integer 0;
But option is not selected. How I can select option with 0?
Im not sure I understood what you were trying to do...
but I think you want to show the text when the value 0 is selected in the ngModel... so you want the ngOptions to go by the value but show the text?
so you want something like:
ng-options="country as country.id for country in countries track by country.id"
please check.... so you can actually do something like
<select ng-options="item.subItem as item.label for item in values track by item.id" ng-model="selected">
$scope.values = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
$scope.selected = { name: 'aSubItem' };
please check
ngOptions docs
If I got you correctly then you are looking for something like this
<html>
<body ng-app="myApp" ng-controller="HomeCtrl">
<select ng-model="selected" ng-options="v for (k,v) in country ">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app=angular.module('myApp', []);
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.selected='Select country...'; // dafault to be displayed
$scope.country={0 : 'Select country...', 1:'France', 2:'India', 3:'USA'};
}]);
</script>
</body>
</html>
Note :- The key of an object will always have to be of string data type. You cannot use integer or number , that will be treated as string only.
I want to use a select to show/hide an input.
Here is my fiddle, but it doesn´t work. I think, the reason will be the dot in the ng-model?!
HTML
<div>
<select ng-options="t.name as t.name for t in fields" ng-model="rule.field">
</select>
<input ng-show="rule.field==2" type="text">
JS
var app = angular.module('app', []);
app.controller('QueryBuilderCtrl', ['$scope',
function ($scope) {
$scope.fields = [{
id: 1, name : 'Title'
}, {
id: 2, name : 'Abstract'
}, {
id: 3, name : 'Age'
}, {
id: 4, name : 'Date'
}, {
id: 5, name : 'In Progress'
}];
}
]);
JSFiddle
Thank your tips and help
<select ng-options="t.name as t.name for t in fields" ng-model="rule.field">
That means that when you select an option in the select box, rule.field will have the name of the selected option (i.e. 'Title', or 'Abstract', or ...). And there is no way that a name is equal to 2.
Use ng-options="t.id as t.name for t in fields".
Just try
<select ng-options="t.id as t.name for t in fields" ng-model="rule.field">
uiModel.appreciation is a key / value object:
{ "key": "B", "value": "Better"}
In my Directive:
scope.appreciationsArray = [{key: 'A', value: 'Good'}, {key: 'B', value: 'Better'}, {key: 'C', value: 'Best'}];
Directive template:
<select name="type" ng-change="onChangeAppreciationSelectBox($index)" class="form-control" ng-disabled="disabled" required ng-model="uiModel.appreciation.key" data-ng-options="appreciationObj.key as appreciationObj.value for appreciationObj in appreciationsList">
</select>
This renders a nice select box and sets the selected item to B / Better.
When changing to another item I want the uiModel.appreciation object to be updated accordingly. So far only the key is updated, the value propertyhowever keeps its initial value.
Looking for the correct Angular way to do it, must be possible without the use of custom Javascript right?
Use the appreciation as the model and as the selector in the comprehension expression instead of the key property:
<select
ng-model="uiModel.appreciation"
ng-options="appreciation.value for appreciation in appreciations">
angular.module('MyModule', [])
.controller('MyController', function($scope) {
$scope.uiModel = {
appreciation: {
"key": "B",
"value": "Better"
}
}
$scope.appreciations = [{
key: 'A',
value: 'Good'
}, {
key: 'B',
value: 'Better'
}, {
key: 'C',
value: 'Best'
}];
$scope.uiModel = {
appreciation: $scope.appreciations[0]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller='MyController'>
<p>Selected appreciation: {{uiModel.appreciation | json}}</p>
<select
ng-model="uiModel.appreciation"
ng-options="appreciation.value for appreciation in appreciations">
</select>
</div>
I have a select that I'm populated and defaulting based on an outside value:
<select ng-model="course.instructor_id" ng-options="instructor.id as instructor.first_name for instructor in instructors"></select>
I think I need to keep the ng-model and options pretty close to this so it updates/defaults the course model correctly but I need to grab a property of the currently selected instructor object.
How do I get the currently selected object for this select?
I want to be able to show the picture of the currently selected instructor:
<img ng-src="selected_instructor.picture""/>
If you need to update the course model when a new instructor is selected, you can use
$scope.$watch
to watch for changes of the selected_instructor value.
Here is an example:
app.controller("instructorCtrl", function($scope) {
$scope.course = {
instructor_id: null
};
$scope.instructors = [{
id: 1,
firstName: "Stefano",
lastName: "Baroni",
imageUrl: "http://placehold.it/300x150"
}, {
id: 2,
firstName: "Elisa",
lastName: "Molinari",
imageUrl: "http://placehold.it/150x150"
}, {
id: 3,
firstName: "Stefano",
lastName: "De Gironcoli",
imageUrl: "http://placehold.it/200x150"
}]
$scope.$watch(
"selected_instructor",
function(newValue, oldValue) {
if (newValue === oldValue) {
return;
}
$scope.course.instructor_id = newValue.id;
}
)
})
html template:
<div ng-controller="instructorCtrl">
<img src="{{selected_instructor.imageUrl}}" />
<br/>
<select ng-model="selected_instructor" , ng-options="instructor.lastName for instructor in instructors">
<option value="">-- choose instructor--</option>
</select>
<br/><label>Currently selected instructor:</label>{{selected_instructor}}
<br/><label>Course:</label> {{ course }}
</div>
From what I've seen of your question, you are never setting the selected_instructor. Here's a Fiddle of my solution for you.
You were basically correct in your select tag and its ng-directives. Here's what I used for the HTML template:
<div ng-app="demoApp" ng-controller="demoCtrl">
<select ng-model="instructor" ng-options="teacher.lastName for teacher in instructors">
{{teacher.lastName}}
</select>
<img src="{{instructor.imageUrl}}" />
</div>
For the Angular base, I made a dummy app and controller as such:
angular.module('demoApp', []);
angular.module('demoApp')
.controller('demoCtrl', function ($scope) {
$scope.instructor = null;
$scope.instructors = {
{
firstName: "Scott",
lastName: "Bohle",
courses: ["CHEM110", "CHEM222"],
imageUrl: "http://placehold.it/300x150"
},
{
firstName: "Arial",
lastName: "Fenster",
courses: ["CHEM180"],
imageUrl: "http://placehold.it/150x150"
}
}
});
Also, bonus points to anyone who can tell what University I went to... (Hint, it's the best in Canada.)