ng-select: get selected object, preselect by Id - angularjs

I have a list of users (array of objects)
I need the selected user in $scope.owner for use elsewhere.
I need to pre-select a user by Id and have $scope.owner update with correct object values (e.g. user.Email, user.Address).
$scope.item.UserId needs to change based on the selected user.
This is what I have so far:
<select
ng-model="owner"
ng-change="item.UserId=owner.Id"
ng-options="user as user.Company + ' - ' + user.FirstName + ' ' + user.LastName for user in users track by user.Id">
</select>
Currently 1. and 3. work, but when I pre select using:
$scope.owner = { Id: 1 };
Then I obviously don't all the values from users such as user.Email.
Anyone got ideas or advice?
Thanks, Lex

If you use $scope.owner = {Id:1} even it has same Id it is different instance then one created when iterating in ng-options.
When you get your list of users why not just set
$scope.owner = $scope.users[0]
// or if you need to get by id just use
$scope.owner = $scope.users.filter(...)[0]
Here is sample plunker.
http://plnkr.co/edit/5VZbdmBmtaDpkeLYQwft?p=preview

Related

Mapping ng-model with corresponding ng-value from json data for select

I have a select element like this
<select class="span3" ui-select2="{minimumResultsForSearch: -1}" ng-model="envelope.roofType">
<option value="">Select..</option>
<option ng-value="roof.id" ng-repeat="roof in roofList">{{roof.type}}</option>
</select>
So basically i'm sending the id corresponding to roofType in my post call.Now in my get call i get the same id back.I'm doing this in my controller.
$scope.envelope = success.records;
Now in my view since ng-model corresponds to envelope object,envelope.roofType is showing the id instead of actual type.
My question is,is there any way to map these id to actual text that should be displayed?
If you want to get the element that corresponds to that id, you can do it with a simple find function:
$scope.envelope = roofList.find(function(element) {
return element.id == success.records ;
});
This will return the element of the array that corresponds to the id, I'm supposing success.records is the id that you wanna map.

Get / Set entity when dealing with relation attribute

I'm working in a Wakanda environnement with the angular-wakanda connector.
Assume this model : Employee(firstName,lastName,company) and Company(name)
In the employee form, I have a select input that is filled with companies names (which is a entity collection).
I have set a ng-model="selectedCompany" in the select
When I select one company and perform a save, the value I get represent the value I have pass in the value of my option (ID or name).
When I assign the value to a new entity using the $create() method, I don't know which way to set the entity to the relation attribute. I assume that I have to give an entity. The thing is that I already have the entitycollection with all the entities. So I don't see the reason why should I query again the server just to assign somthing that I have already.
So the thing is that we should have a method like $find or $getById that will not do a request on the server but get the entity that is already loaded in the entityCollection. For now I use my own method that do a simple loop over my array. (I can share the code if anybody need it)
Am I missing a way to do that?
Assuming your selectedCompany variable contains an entity (of type Company), you only have to pass this variable on the $create() call with the property name like this:
var newEmployee = ds.Employee.$create({
firstName: 'foo',
lastName: 'bar',
company: $scope.selectedCompany
});
If selectedCompany contains only company name or ID, it's on you to have an array to map the companies with their name or ID. Something like that:
//When retrieving collection
var companyMap = [];
companies.forEach(function (company) {
companyMap[company.ID] = company;
}
//When you want your company with its ID
var company = companyMap[$scope.selectedCompany];
But the simplest way is the first, with your <select> directly iterating through entity collection, so that you can deal with entities.
Edit: Retrieving object with ng-option
To get the object on which you iterate on your select, you can use ng-option like this:
<select
ng-model="selectedCompany"
ng-change="companyChanged()"
ng-options="c.name for c in companies"
>
</select>
On the controller
$scope.selectedCompany = null;
$scope.companyChanged = function () {
if ($scope.selectedCompany) {
//selectedCompany is your company entity
//you can manipulate it like any other entity
$scope.selectedCompany.$save(); //for example
}
};
I think that your real problem is that you iterate on name/ID of each entity of company Collection.
This is the bad way to iterate on collections :
<select ng-model="selectedCompany" ng-options="company.nom as company.nom for i in collenctionOfCompanies">
<option value=""></option>
</select>
In this case selected company will contain only the name of the company.
But if you change your code as this :
<select ng-model="selectedCompany" ng-options="company as company.nom for i in collenctionOfCompanies">
<option value=""></option>
</select>
Then selectedCompany will contain the entity

How to update view in angular, when database has changed?

Ive got a SPA using angular and 2 databases in firebase.
So theres a control (with 2 options) where i'd like choose database to get data. For example first option means 1st database, second option means 2nd one.
The question is: "how to update view in angular, when database has changed".
<select class="form-control" ng-model="level" ng-options="lvl in lvls"></select>
<div>{{data}}</div>
in controller
var levelString = "https://amber-inferno-9289.firebaseio.com/" + $scope.level + "/";
$scope.dictionary = new Firebase(levelString);
$scope.dictionary.on('value', function(snapshot){
$scope.data = snapshot.val();
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});
I think what you're looking to do is use the ng-change directive on your select and refactor your dictionary set up logic into a function that is called on select change.
<select class="form-control" ng-model="level" ng-options="lvl for lvl in lvls" ng-change="setUpDictionary(level)"></select>
Then in your controller, create the setUpDictionary function to set $scope.dictionary to a new Firebase pointing at a different url etc.
I think this is what you're looking for based on what I could make from your question.
Hope it helps you out!

getting selected value for select list in angular from a $firebaseArray()

I have a simple select list that is based on a $firebaseArray(). I dont have a problem getting the values into the drop. Just the selected value.
<select class="form-control" ng-model="vm.selectedRole"
ng-options="role.name for role in vm.allRoles">
</select>
The $firebaseArray looks like this
In my controller the function that initializes the form with the select is
Get.getParentUrl('roles').$loaded()
.then(function (data) {
vm.allRoles = Get.getParentUrl('roles');
vm.selectedRole = entity.role.name;
})
And this populates the select but it does not set the selected value for it on vm.selectedRole. Note that entity is the value that is being passed , so if i write a
console.log(entity.role.name);
The returned value is the selected value that is being passed. So if the user selects a user with a role "Supervisor" and i write a console.log(vm.selectedRole) inside the .then(function(data){ the value returned is "Supervisor"
However the html displays a "?"
I got it working by adding the vm.selectedRole like so
vm.selectedRole = { name: entity.role.name };
Which works i guess. Syntax seems a bit crappy though
https://docs.angularjs.org/api/ng/directive/ngOptions

How to update the first item in a ng-repeat

Trying to get my head around ng-repeat and sort! I have a list of JSON objects as follows:
Current user list:
[{user: abc, name: ABC},{user: xzy, name: XZY}]
I've got an ng-repeat that iterates the list to display the user details. This all works, however, I want the first item in the list to be that of the logged in user. In this case user xzy is the logged in user so that person should display first.
Any help is appreciated.
J
Use a custom orderBy function and put the current user first, ex:
<div ng-repeat="user in users | orderBy: currentUser"></div>
And the function
$scope.currentUser = function(user) {
if (user.user == $scope.currentUserName) return 0
else return 1;
}
Where $scope.currentUserName holds the user name of the currently logged in user.

Resources