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"
Related
I'm just starting to play with components in Angular 1.5.x and have created one for a select box on a form - I pass in the field, list and label to the component and it creates the form 'part' consisting of the label and select box with the correct options - so far, so good.
Now I want to implement an ng-change on the select so I am passing in the function I want to use for this. The problem I have is that the function is triggering with the old value for the select not the new value. I can see that the function is triggering prior to the actual change. If I put the change function within the component change event it registers correctly, but not using a passed in function.
I have created a cut-down fiddle at https://jsfiddle.net/7gd3m2k0/
<div ng-app="demoApp">
<div ng-controller="RoleController as ctrl">
<nac-select
field="ctrl.MemberRole.record.member"
list="ctrl.Lists.Member"
label="Member"
on-change="ctrl.MemberRole.changeMember();"></nac-select>
<div ng-bind="ctrl.MemberRole.record.member.name"></div>
</div>
</div>
angular.module('demoApp', [])
.component('nacSelect', nacSelect)
.controller('RoleController', roleController)
var nacSelect = {
bindings: {
field: '=',
list: '<',
label: '#label',
onChange: '&'
},
controller: function () {
var ctrl = this;
ctrl.change = function () {
alert(ctrl.field.name); //gives new selection
ctrl.onChange(); //gives previous selection
}
},
template: `
<label>{{$ctrl.label}}</label>
<select ng-model="$ctrl.field" ng-options="r as r.name for r in $ctrl.list" ng-change="$ctrl.change();">
<option value="">(Please Select)</option>
</select>
`
};
var roleController = function(){
var ctrl = this;
ctrl.Lists = {
Member: [
{id: 1, name: 'Fred Smith'},
{id: 2, name: 'Jenny Jones'},
{id: 3, name: 'Jane Doe'}
]
};
ctrl.MemberRole = {
record: {
member: null
},
changeMember: function(){
alert(ctrl.MemberRole.record.member.name);
}
};
};
I guess I am missing something simple, but I can't figure it out. Thank you for your assistance
You need to pass in variable that you want to alert in the first controller, check this:
https://jsfiddle.net/pegla/7gd3m2k0/1/
so your function would look like this:
changeMember: function(name){
alert(name);
}
when you're using nac-select
<nac-select field="ctrl.MemberRole.record.member" list="ctrl.Lists.Member" label="Member" on-change="ctrl.MemberRole.changeMember(name);"></nac-select>
and in the end in the nac-select:
<select ng-model="$ctrl.field" ng-options="r as r.name for r in $ctrl.list | orderBy: 'name'" ng-required="$ctrl.req" ng-if="!$ctrl.list.processing" ng-change="$ctrl.onChange($ctrl.field)">
or if you want to pass in object:
<nac-select field="ctrl.MemberRole.record.member" list="ctrl.Lists.Member" label="Member" on-change="ctrl.MemberRole.changeMember({id, name});"></nac-select>
then your changeMember can look like this:
changeMember: function(obj){
alert(`${obj.name} ${obj.id}`);
}
New fiddle:
https://jsfiddle.net/pegla/7gd3m2k0/2/
This is my HTML
<select ng-model="selectedToggle" ng-change="changedValue()">
<option ng-repeat="x in toggle" value="{{x.data}}" ng-selected="">{{x.name}}</option>
</select>
This is my angularjs
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {
$scope.toggle = [
{data: "orderer", name: "Orderer"},
{data: "creator", name: "Creator"}
]
$scope.selectedToggle = $scope.toggle[1];
});
Im using the ng-repeat over ng-options is I want to put the data to value
This line $scope.selectedToggle = $scope.toggle[1]; will work only if I use ng-options is their any way to make a pre-selected while the value of <options> will have an orderer and creator
It should be like this
$scope.selectedToggle = $scope.toggle[1].data;
I cannot seem to get my dropdown to default to having the first store selected.
html:
<select
id="store"
class="form-control input-inline input-medium"
ng-model="orderVm.Stores.selectedStore.id">
<option
ng-repeat="store in orderVm.Stores"
value="{{store.Id}}">
{{store.MarketplaceName}}
</option>
</select>
{{orderVm.Stores.selectedStore}}
vm.Stores (loaded from a local JSON file):
[
{
"Id": 1,
"MarketplaceId": 1,
"MarketplaceName": "Etsy"
]
},
{
"Id": 2,
"MarketplaceId": 2,
"MarketplaceName": "Shopify"
}
]
controller:
angular
.module('WizmoApp')
.controller('orderController', orderController);
orderController.$inject = ['$http', '$location', 'toastr', 'DTColumnDefBuilder', 'DTOptionsBuilder', 'Cart', 'OrderService', 'PackageService'];
function orderController($http, $location, toastr, DTColumnDefBuilder, DTOptionsBuilder, Cart, OrderService, PackageService) {
var vm = this;
vm.Stores = json; //from file
vm.Stores.selectedStore = {
id: vm.Stores[0].Id,
name: vm.Stores[0].MarketplaceName
};
OrderService.getOrdersGroupedByStore(function (json) {
vm.Stores = json;
vm.selectedStore = {};
});
routes.js:
.state('layout.orders', {
url: '/orders',
templateUrl: '/Content/js/apps/store/views/order.html',
controller: 'orderController',
controllerAs: 'orderVm',
data: { pageTitle: 'Orders' }
})
(It doesn't help that the first option is blank, but first things first.)
I'd use ng-options but frankly, it's even more obscure than this.
https://jsbin.com/kanaco/edit?html,js,output
I write a sample code for you.
Use ng-options for select.
edit:
<select id="store" class="form-control input-inline input-medium"
ng-model="ctrl.selectedStores"
ng-options="item.MarketplaceName for item in ctrl.Stores"
ng-init="ctrl.selectedStores=ctrl.Stores[0]">
</select>
You can use ng-options for repeat option, and use ng-init for default select.
Never use ng-repeat to build select options. Instead, use ng-options, which has a dedicated directive for this:
<select
id="store"
class="form-control input-inline input-medium"
ng-model="orderVm.Stores.selectedStore"
ng-options="store.ID as store.MarketplaceName for store in orderVm.Stores">
</select>
In your controller, you need to assign a default value to the select model:
orderVm.Stores.selectedStore = 1;
This would cause the Etsy option to be selected when the controller loads. Note that the model is just an id here, you don't need to use an object. The reason you were getting an empty option is that Angular could not bind the model to any of the options.
I had a very similar problem to yours and was asissted by a kind guru.
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.