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">
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 the following html for drop down.
<select id="selection">
<option value="{{n}}" ng-repeat="n in selections">{{n}}</option>
</select>
where selections is an array of strings and the array lives in my angularJS controller.
The initial data for the select options are correct, but When the array is updated by getting assigned as [] and then pushed in some new data, the select options does not update accordingly.
Are there workarounds for this?
Sample controller:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
html -
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
use ng-options instead of ng-repeat.
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 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.
I am using Angular v1.0.8
I have a select and I am using ng-options directive to populate it with an array of data declared in my Controller.
HTML snippet
<body ng-controller="SelectCtrl">
<select
ng-model="selected"
ng-options="o as o.caption for o in options" />
</body>
Code snippet
angular.module('app', [])
.controller('SelectCtrl', ['$scope', function($scope) {
$scope.options = [
{ key: 1, caption: '1' },
{ key: 2, caption: '2' },
{ key: 3, caption: '3' },
{ key: 4, caption: '4' },
{ key: 5, caption: '5' }
];
}]);
In Chrome, if you select let's say option 3 then, as expected, it gets selected.
In IE10, however, if you select option 3 then option 1 gets selected.
(http://plnkr.co/edit/T9bbEW?p=preview)
This only happens when there is no default selection set in the controller. And subsequent selections done after the "blank" choice is removed gets set correctly.
I suspect that it might possibly be a duplicate of This issue but I am not entirely sure. I am not really dynamically changing the options here although I suppose maybe Angular is since the "blank" choice are getting removed in both browsers.
I do however want this functionality. I don't want to provide a default value for this select because the user needs to make an active choice for me.
Does anyone know a workaround and/or solution for this? Preferably one that does not involve messing with the options using JQuery...
The blank item that angular adds has some odd behavior. The way we've gotten around it is to explicitly add our own blank item and select it via the controller:
angular.module('app', []).controller('SelectCtrl', ['$scope', function($scope) {
$scope.options = [
{ key: 0, caption: ' ' },
{ key: 1, caption: '1' },
{ key: 2, caption: '2' },
{ key: 3, caption: '3' },
{ key: 4, caption: '4' },
{ key: 5, caption: '5' }
];
$scope.selected = $scope.options[0]
}]);
I fix this by adding following default option into select.
<option value="">Pls select</option>
so your select would look like this:
<body ng-controller="SelectCtrl">
<select
ng-model="selected"
ng-options="o as o.caption for o in options">
<option value="">Pls select</option>
</select>
I tested this in IE 11, 10, 9 and it seems to be working.
Please let me know if it works for you as well.
I think this is cleaner than the above solution.