How to customize angular sharp-select
I am trying to use Angular sharp-select on my table. It's hard for me to work. The demo on github is not a plunkr, so I can't see much of what's going on. I have no idea how to install this on plunkr, I'm not sure how to do the JSON. I am getting an error with what I am currently doing, but I believe that I am not collecting data from the controller. Any help would be great. thank
<tbody>
<td>
<select class="ac-select stateList" ac-model="currentItem.JobItems[0].JobItemName" ac-options="currentItem.JobItems.JobItemName for currentItem in getAllJobItems()"
ac-key="JobItemId" ac-settings="{ initialText: 'Job Items', comboMode:true, loadOnOpen: true, minWidth: '300px', allowClear: false }" ng-enter="selectJobItem();addRecord()"></select><br />
</td>
<td>{{currentItem.JobItems.JobItemDescription}}</td>
<td>{{currentItem.JobItems.JobItemMatSize}}</td>
</tr>
</tbody>
controller
//GET Jobs
$scope.jobArray = {};
JobGet.query().then(function (data) {
$scope.jobArray = data;
}, function (reason) {
errorMngrSvc.handleError(reason);
});
// Return All Job Items for select Box
$scope.getAllJobItems = function (callback) {
callback($scope.jobArray);
};
//Bind Selected POD JobItems to table fields
$scope.currentItem = {};
$scope.selectJobItem = function (jobItem) {
$scope.currentItem.JobItems.JobItemName = jobItem.JobItems[0].JobItemName;
$scope.currentItem.JobItems.JobItemDescription = jobItem.JobItems[0].JobItemDescription;
$scope.currentItem.JobItems.JobItemMatSize = jobItem.JobItems[0].JobItemMatSize;
};
JSON
Error message
ac-options and ac-model attributes must be set <div class="ac-select stateList ac-select-wrapper ng-isolate-scope" ng-keydown="keyHandler($event)" tabindex="999" ac-focus="wrapperFocus" ng-focus="comboFocus = true" ac-model="currentItem.JobItems[0].JobItemName" ac-options="currentItem.JobItems.JobItemName for currentItem in getAllJobItems()" ac-key="JobItemId" ac-settings="{ initialText: 'Job Items', comboMode:true, loadOnOpen: true, minWidth: '300px', allowClear: false }" ng-enter="selectJobItem();addRecord()">
+3
source to share
1 answer
It looks to me like you are trying to map the select value to the JobItem attribute. You probably want the name to appear in the select, but the select value must be an object. Therefore, instead of
ac-model="currentItem.JobItems[0].JobItemName"
try to map it to object.
$scope.selectedJobItem = null;
...
ac-model="selectedJobItem"
Use ac options to make sure the name is displayed
ac-options="job.JobItemName for job in someJobCollection"
Hope it helps.
+2
source to share