How to use acute-select

Rudy Sanchez

unread,

Oct 22, 2014, 3:53:25 PM10/22/14

to ang...@googlegroups.com

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>

 //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;
};

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

Capture.JPG

Adrian Lynch

unread,

Oct 22, 2014, 5:25:30 PM10/22/14

to ang...@googlegroups.com

Is there any more code surrounding the portions you've posted?

I've just downloaded the code from the demo page and it's working for a simple example:

<!doctype html>

<head>

<title>acute-select</title>

</head>

<h1>Acute Select</h1>

<ac-select ac-model="selectedColour" ac-options="c.name for c in colours"

ac-change="colourChanged(value)"></ac-select>

var app = angular.module("AcuteSelectDemo", ['acute.select']);

app.controller("MainCtrl", function ($scope) {

$scope.colours = [

{ name: 'black', id: 0 },

{ name: 'white', id: 1 },

{ name: 'red', id: 2 }

];

$scope.selectedColour = $scope.colours[2]; // red.

$scope.colourChanged = function (value) {

var colourName = value ? value.name : "none";

$scope.message = "ac-change event fired for colour. New colour: " + colourName;

$scope.$digest();

};

});

</script>

</body>

</html>

Although I do get an [$rootScope:inprog] error when I start to use the drop down!

Adrian

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Rudy Sanchez

unread,

Oct 22, 2014, 5:32:07 PM10/22/14

to ang...@googlegroups.com

thats all the relevant code. The confusing part is that I am retrieve 'JobItems' through 'Job'. So Im not sure where to start, am I trying to retrieve the JobItemName incorrectly? I would think "currentItem.JobItems.JobItemName " is the way to set it up but I cant get it to work on a angular-ui typeahead?

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/3ciT8CTK5PI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.