CODEWITHSUNDEEP
angularjs
texas697
texas697

Reputation: 6397

How to setup angular acute-select

I am trying to use Angular acute-select in my table. I am having a hard time making it work. The demo on github is not a plunkr so I can not see to much of what is going on. I have no idea how to set this up on a plunkr, I am not sure how to do the JSON. I am getting a error with what I go now but I believe I am not bringing any data in from the controller. Any help would be great. thanks

<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 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()">

Upvotes: 3

Views: 2892

Answers (1)

me_
me_

Reputation: 67

It seems to me that you're trying to map the value of the select to an attribute of the JobItem. You probably want the name to be displayed in the select, but the value of the selection should be an object. So instead of

ac-model="currentItem.JobItems[0].JobItemName"

try mapping it to an object instead. 

$scope.selectedJobItem = null;
... 
ac-model="selectedJobItem"

Use ac-options to make sure name is displayed

ac-options="job.JobItemName for job in someJobCollection"

Hope that helps.

Upvotes: 2

Related Questions