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.
Related
I am loading a select control in angular js from an array of json objects.
I want to set the selected property if the ordinal position of an item in the collection matches some value (such as 3 for example), eg,
<option ng-repeat="query in ReportQueries" selected="query.ordinal==3"
value="query.ReportQueryID">{{query.QueryName}}</option>
There is no property "ordinal" on my object, I am hoping there is some index or counter angular generates and exposes when iterating through a collection.
Does anyone know if this is possible? Thanks
Thanks
Here is an Example which may help you: Updated
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.test = 3;
$scope.ReportQueries = [{
ReportQueryID: 1,
QueryName: 'Amy'
}, {
ReportQueryID: 2,
QueryName: 'Ben'
}, {
ReportQueryID: 3,
QueryName: 'Betty'
}, {
ReportQueryID: 4,
QueryName: 'Hannah'
}, {
ReportQueryID: 5,
QueryName: 'John'
}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="test">
<option ng-repeat="query in ReportQueries" ng-selected="test==$index">{{query.QueryName}}</option>
</select>
<h1>Selected Index is: {{test}}</h1>
</div>
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 dropdown inside my view that is being populated from factory(AJAX) API in other words I have a JSON formatted data to populate the dropdown(id,display_text) as follows:
My View
<select class="form-control padding-7" ng-model="selConnData.repeatSelect" ng-options="types.id as types.text for types in selConnData.connList" ng-change="updateConType('{{types.val}}')">
</select>
My Controller
$scope.selConnData = {
repeatSelect: null
};
getConnectionList.connectionList().then(function(response){
console.log(JSON.stringify(response.data));
var tempConnections = {};
var tempConnList = [];
angular.forEach(response.data.result, function(value, key) {
tempConnList.push({
id: value.Id,
text: value.Name,
val: "thrLoc"
});
});
$scope.selConnData.connList = tempConnList;
});
My Factory
app.factory('getConnectionList', function($http) {
var resultant = {};
resultant.connectionList = function(){
return $http({
method: 'GET',
url: "xyz"
});
}
return resultant;
});
My Final JSON o/p will be in:
[{
id: 1,
text: "Connection 1",
val: "8010"
},{
id: 2,
text: "Connection 3",
val: "8030"
},{
id: 9,
text: "Connection 4",
val: "8040"
}]
Now, my dropdown option will be like
<select>
<option value="1">Connection 1</option>
<option value="2">Connection 3</option>
<option value="9">Connection 4</option>
</select>
Up to here,everything is working, my ng-model gives me selected value,but i need a condition to run where on change of options I will check if(8010) do-something elseif(8030) do-something elseif(8040) do-something.
P.S: I tried ng-attr but not a best case(couldn't get the values out)
If you want both id and value, then you can try something like this,
<select class="form-control padding-7" ng-model="select" ng-options="{id:types.id,val:types.val} as types.text for types in options" ng-change="updateConType(select)">
</select>
Plunker link. .
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 can successfuly bind an array to a select tag in angular using this syntax:-
var mainApp = angular.module('mainApp', []);
mainApp.controller('mainController', [
'$scope',
function ($scope) {
$scope.testArray = [{ text: '1st', value: 1 }, { text: '2nd', value: 2 }];
}]);
My HTML is like this:-
<select ng-model="testModel" ng-options="theTitle.text as theTitle.text for theTitle in testArray"></select>
However this creates an option list like this:-
<select ng-options="theTitle.text as theTitle.text for theTitle in testArray" ng-model="testModel" class="ng-pristine ng-valid">
<option value="?"></option>
<option value="0">1st</option>
<option value="1">2nd</option>
</select>
How do you bind the value property in the array to the option value attribute and why does it display the first option as a ?
Is there something else I need to put in my ng-options attribute?
in in html section:
<select ng-model="testModel" ng-options="theTitle.text for theTitle in testArray"></select>
in javascript section
var mainApp = angular.module('mainApp', []);
mainApp.controller('mainController', [
'$scope',
function ($scope) {
$scope.testArray = [{ text: '1st', value: 1 }, { text: '2nd', value: 2 }];
$scope.testModel = $scope.testArray[0];
}]);
The reason that ? Is showing is because your ngModel has not been initialized. In mainController, initialize testModel to '1st'. You will see that the ? goes away, and your drop down list is initialized to your first item
In ng-options, the format goes value as alias, so you need:
<select ng-model="testModel" ng-options="theTitle.value as theTitle.text for theTitle in testArray"></select>
The ? option is created because your model value does not exist as an option in the select, so the browser adds it to display the input as empty. To fix it you want to initialise the model to a valid value, something like: ng-init="testModel = testArray[0].value"