<select
get-sport
name="sportId"
id="sportId"
ng-model="sm.sport_id"
ng-change="changeSport()"
ng-options="sport.sport_id as sport.name for sport in sports track by sport.sport_id"
ng-required="true">
<option value="" selected="selected">-- Select Sport--</option>
</select>
return {
scope : true,
link : function (scope) {
scope.spinning = true;
$http.get('v1/sport')
.success(success)
.error(error);
function success(data){
scope.sports = data.data;
scope.spinning = false;
}
function error(error) {
console.log(error);
}
}
};
In my console Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object ]
Object having name : cricket, sport_id : '1'
Into my sm.sport_id getting value 3 it should be equal to name : football, sport_id : 3 but by default it is selecting blank value i don't understand why please guide thanks a ton in advance
your answer is here
"you just can't combine value as label for collection with track by. You have to pick the one or the other.".
<select ng-model="sport" ng-options="sport as sport.name for sport in sports track by sport.id">
an in this case you can only get the selected sport as your selected option not the id of that
$scope.sports = [{id: 1, name: 'Cricket'}, {id: 2, name: 'Hockey'}, {id: 3, name: 'Football'}]
$scope.sport = $scope.sports[0];
If you want remove blank in option and dont initialize value for it . Add ng-if in option .
<select
get-sport
name="sportId"
id="sportId"
ng-model="sm.sport_id"
ng-change="changeSport()"
ng-options="sport_id as sport.name for sport in sports track by sport_id"
ng-required="true">
<option value="" ng-if="hideOption" selected="selected">-- Select Sport--</option>
</select>
I overcome this point myself the sport_id need to convert fr4om integer to string i did so it work like a charm
Related
I have two objects, one of users and one of groups. The user object contains the ids of the groups the user is part of, and the groups object contains the id, name and type of group (i.e. hierarchy).
Examples below:
users = {
"user_id_1": {
id: "user_id_1",
name: "Steve Smith",
username: "ssmith1",
groups: ["group_id_1", "group_id_3",...]
},
...
}
groups = {
"group_id_1": {
id: "group_id_1",
name: "Group 1",
type: "level_1"
},
...
}
The goal is (at least initially) to have two dropdowns, one for groups and one for users. Selecting a group filters the user list to only show users part of that group.
I've been looking at ui-select to create the dropdowns for me (the input box as part of the dropdown is ideal) or just simple typeahead (but it does lack the dropdown options).
For now I have a simple example for the users dropdown:
<select id="user-dropdown">
<option ng-repeat="user in $ctrl.users" value="{{ user.id }}">{{ user.name }}</option>
</select>
The problem is that Angular filters only allow filtering of arrays and not objects.
I had the idea of creating two arrays from the objects:
userArray = [user_id_1, user_id_2, ...];
groupArray = [group_id_1, group_id_2, ...];
<option ng-repeat="user in $ctrl.userArray" value="{{ $ctrl.users[user].id }}">{{ $ctrl.users[user].name }}</option>
Even in this case I had problems filtering this list based on the group, as it no longer has the group available in the object.
Any help or thoughts would be appreciated please.
First, reduce your object to an Array and then on select of group dropdown, filter your users. sample code below:
JS:
$scope.groupArray = [];
for(var prop in $scope.groups){
$scope.groupArray.push($scope.groups[prop]);
}
var userArray = [];
for(var prop1 in $scope.users){
userArray.push($scope.users[prop1]);
}
$scope.onGroupSelect = function(){
$scope.userList = [];
$scope.userList = userArray.filter(function(user){
return user.groups.some(function(group){
return group === $scope.selectedGroup;
})
})
}
HTML:
<select ng-model="selectedGroup" ng-change="onGroupSelect()"
ng-options="group.id as group.name for group in groupArray">
</select>
<br/>
<select ng-model="selectedUser">
<option ng-repeat="user in userList" value="user.id">
{{user.name}}
</option>
</select>
here is the working plunkr for your reference
I'm fairly new to Angular and was wondering how I can update a dropdown after doing an insert and have the new value selected?
I tried the following:
<select class="form-control" ng-model="selectedCompany" ng-change="GetCompany()"
ng-options="company.key as company.value for company in CompanyList">
<option value="">Select a Company</option>
</select>
This populates a list of companies when the page 1st loads and the inserted data is returned to scope + it's id.
To add the new value without refreshing the page, I'm trying the following non-working (almost) code:
var key = $scope.company.id;
var value = $scope.company.name;
$scope.CompanyList.push({ key: value });
$scope.selectedCompany = $scope.company.id;
This seems to add a value to the dropdown, but it's showing up blank. It's also not selecting the blank value (which should be the new company name), any help would be appreciated.
It seems that when you create the new company object, you need to assign the value property which is the display name.
Here's a code snippet:
angular.module("myApp", [])
.controller("testCtrl", function() {
this.companyList = [{
key: 1,
value: "Company A"
}];
var ctrl = this;
this.addCompany = function() {
ctrl.companyList.push({key:2, value:"Company B"});
ctrl.selectedCompany = 2;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="testCtrl as ctrl">
<select class="form-control"
ng-model="ctrl.selectedCompany"
ng-options="company.key as company.value for company in ctrl.companyList">
<option value="" disabled>Select a Company</option>
</select>
<button ng-click="ctrl.addCompany()">
Add company B and select it
</button>
</div>
Ok, so what do we have here?
You're creating your options with the ngOptions directive like this: ng-options="company.key as company.value for company in CompanyList"
That mean that the array $scope.CompanyList must have objects with a key property that will be set to the option value attribute, and a value that will be the option display value (Or label, if you prefer to call it that way).
What you were doing wrong: You added an object with only one property named key and set its value with the value variable: $scope.CompanyList.push({ key: value });
How should you fix it: You need to append object(s) with a key and a value like so: $scope.CompanyList.push({ key: key, value: value });
The following line push an object, which has a property name "key" set to value:
$scope.CompanyList.push({ key: value });
The result will be:
{'key': $scope.company.name}
You may change it to:
$scope.CompanyList.push({key: key, value: value});
Which will result in:
{ 'key': $scope.company.id, 'value': $scope.company.name }
I have the variable:
$scope.rolesData = [{id : '1', name : 'user'}, {id : '2', name : 'superuser'},{id : '3', name : 'admin'}];
And I got from a DB an user object with integer value, which tells me what is the role. It is from 1 to 3. user.userRole is 1,2 or 3.
$scope.users = adminUserSvc.query(); //From DB
Everything is workin fine in select:
<tr ng-repeat="user in users">
...
<select class="form-control" ng-model="user.userRole" ng-options="role.id as role.name for role in rolesData">
</select>
But I wonder how I can show the same inside the {{}}? If I know that user.userRole is giving me id 1, how the heck I'll get the value of name?
This is inside the ngRepeat:
<div ng-hide="editingUsers[user.userId]">{{rolesDataSOMETHING??}}</div>
Ok you can use this:
{{(rolesData | filter:{id:user.userRole})[0].name}}
At first it filters the rolesData Object - then gets the first object (it should only be one because of the filter) with [0].
Old Answer (to old question):
You just need to save the right 'thing' in your model by changing your ng-options!
ng-options="role as role.name for role in rolesData"
This will save the whole role object {id : '1', name : 'user'} in your user.userRole model, to output the name just use {{user.userRole.name}}
There is no need for ngRepeat here.
You could use lodash (http://lodash.com) to find the element you are looking for. You'd probably want to put that in a function on your controller. Something like
$scope.getName = function(id) {
var i = _.findIndex($scope.rolesData, { id: id });
return $scope.rolesData[i].name;
}
And then in your template, you could reference this in the brackets like:
<div ng-hide="edingUsers[user.userId]">{{getName(user.userRole)}}
I'm getting some data in JSON format which has spaces in the some of the keys:
[
{
"PlainKey": "SomeValue",
"Spaced Key": "SomeValue"
},
{
"PlainKey": "SomeValue2",
"Spaced Key": "SomeValue2"
}
]
This happens at some point:
$http.get('https://dl.dropboxusercontent.com/u/80497/htmlTesting/properties/credits.properties' + '?callback=JSON_CALLBACK').then(function (data) {
$scope.credits = data.data;
}, function (error) {
$scope.errorOccured = true;
console.log("Error:");
console.log(error);
});
and then ng-repeat is used to display it, with ordering:
<select ng-model="corder">
<option value="PlainKey">Plain Key</option>
<option value="Spaced Key">Spaced Key</option>
</select>
<li ng-repeat="credit in credits | orderBy:corder" >
.....
</li>
This doesn't work ( I get an exception )
(The PlainKey works because there are no spaces).
I also tried putting the values in ':
<select ng-model="corder">
<option value="'PlainKey'">Plain Key</option>
<option value="'Spaced Key'">Spaced Key</option>
</select>
This seems to change the order, but not correctly.
What Am I missing?
Thanks!
Simplest way, just surround a field name with UTF8 code for quotation mark:
HTML
<li ng-repeat="item in items | orderBy:'\u0022Spaced Key\u0022'">
JS
$scope.orderKey = '\u0022Spaced Key\u0022';
Comments appeared to help so I'm including it as an answer:
One way to sort items with spaces in their object property names is to pass a predicate sort function into orderBy instead of specifying the object property name. The relevant modifications in particular:
HTML:
<li ng-repeat="credit in credits | orderBy:predicate">
JS:
$scope.predicate = function(val) {
// $scope.corder corresponds to the object property name to sort by
return val[$scope.corder];
}
Demonstration Plunker.
I have an object as below. I have to display this as a drop-down:
var list = [{id:4,name:"abc"},{id:600,name:"def"},{id:200,name:"xyz"}]
In my controller I have a variable that carries a value. This value decided which of the above three items in the array will be selected by default in the drop-down:
$scope.object.setDefault = 600;
When I create a drop-down form item as below:
<select ng-model="object.setDefault" ng-options="r.name for r in list">
I face two problems:
the list is generated as
<option value="0">abc</option>
<option value="1">def</option>
<option value="2">xyz</option>
instead of
<option value="4">abc</option>
<option value="600">def</option>
<option value="200">xyz</option>
No option gets selected by default even though i have ng-model="object.setDefault"
Problem 1:
The generated HTML you're getting is normal. Apparently it's a feature of Angular to be able to use any kind of object as value for a select. Angular does the mapping between the HTML option-value and the value in the ng-model.
Also see Umur's comment in this question: How do I set the value property in AngularJS' ng-options?
Problem 2:
Make sure you're using the following ng-options:
<select ng-model="object.item" ng-options="item.id as item.name for item in list" />
And put this in your controller to select a default value:
object.item = 4
When you use ng-options to populate a select list, it uses the entire object as the selected value, not just the single value you see in the select list. So in your case, you'd need to set
$scope.object.setDefault = {
id:600,
name:"def"
};
or
$scope.object.setDefault = $scope.selectItems[1];
I also recommend just outputting the value of $scope.object.setDefault in your template to see what I'm talking about getting selected.
<pre>{{object.setDefault}}</pre>
In View
<select ng-model="boxmodel"><option ng-repeat="lst in list" value="{{lst.id}}">{{lst.name}}</option></select>
JS:
In side controller
$scope.boxModel = 600;
You can do it with following code(track by),
<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>
This is an old question and you might have got the answer already.
My plnkr explains on my approach to accomplish selecting a default dropdown value. Basically, I have a service which would return the dropdown values [hard coded to test]. I was not able to select the value by default and almost spend a day and finally figured out that I should have set $scope.proofGroupId = "47"; instead of $scope.proofGroupId = 47; in the script.js file. It was my bad and I did not notice that I was setting an integer 47 instead of the string "47". I retained the plnkr as it is just in case if some one would like to see. Hopefully, this would help some one.
<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>
This would get you desired result Dude :) Cheers
Some of the scenarios, object.item would not be loaded or will be undefined.
Use ng-init
<select ng-init="object.item=2" ng-model="object.item"
ng-options="item.id as item.name for item in list"
$scope.item = {
"id": "3",
"name": "ALL",
};
$scope.CategoryLst = [
{ id: '1', name: 'MD' },
{ id: '2', name: 'CRNA' },
{ id: '3', name: 'ALL' }];
<select ng-model="item.id" ng-selected="3" ng-options="i.id as i.name for i in CategoryLst"></select>
we should use name value pair binding values into dropdown.see the
code for more details
function myCtrl($scope) {
$scope.statusTaskList = [
{ name: 'Open', value: '1' },
{ name: 'In Progress', value: '2' },
{ name: 'Complete', value: '3' },
{ name: 'Deleted', value: '4' },
];
$scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open
}
<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>
I could help you out with the html:
<option value="">abc</option>
instead of
<option value="4">abc</option>
to set abc as the default value.