How do I properly bind my dropdown to a controller variable but instead use the id property of my drop down array and not the value to assign value, still showing the drop down content using the name property of my array for the end user to select?
AngularJS Working Dropdown Template, but with no ID/Value property
<ui-select ng-model="ctrl.risk.owner" theme="select2"
ng-disabled="ctrl.disabled" style="max-width: 150px"
title="Choose a person">
<ui-select-match placeholder="Select/Search User">
{{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="user in ctrl.users | propsFilter: {name: $select.search}">
<div value="user.id" ng-bind-html="user.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
Set Up Array (this is where I need user.id for the select-ui dropdown library)
$http.get('api/users').then(function(response){
if (response.data.Succeeded){
for (var key = 0; key < response.data.Result.length; key++){
user = response.data.Result[key];
$scope.ctrl.users[user.id] = {name: user.name};
}
$scope.ctrl.userDone = true;
return response.data.Result;
}
else{
$scope.ctrl.msg += "<br />"+
$sce.trustAsHtml(response.data);
}
});
The value HTML attribute is not used by ui-select, so it is meaningless. Your selection is indicated by what youspecify in your repeat statement.
This statement means that the user will be used for binding:
<ui-select-choices repeat="user in ctrl.users | propsFilter: {name: $select.search}">
This statement means that the user id will be used for binding:
<ui-select-choices repeat="user.id as (id, user) in ctrl.users | propsFilter: {name: $select.search}">
In general, the ng-model object will get what you have indicated for binding. I see no problem with getting a user in ctrl.risk.owner
, but you have to expect it in your code and can then get the user.id as needed. I think you are trying to access the selected id in this line:
$scope.ctrl.users[user.id] = {name: user.name};
If that's true, you should simply be looking at ctrl.risk.owner
for the selected user.
Play with the examples ui-select provides. I think this one matches what you are attempting most closely: http://plnkr.co/edit/?p=preview