如何设置角度锐选

时间:2014-10-22 01:58:34

标签: angularjs

我正在尝试在我的表中使用Angular acute-select。我很难让它发挥作用。 github上的演示不是一个傻瓜,所以我看不到发生了什么。我不知道如何在一个plunkr上设置它,我不知道如何做JSON。我现在得到了一个错误,但我相信我没有从控制器中带来任何数据。任何帮助都会很棒。感谢

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

JSON JSON 错误消息

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

1 个答案:

答案 0 :(得分:2)

在我看来,您正在尝试将select的值映射到JobItem的属性。您可能希望名称显示在选择中,但选择的值应该是对象。而不是

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

尝试将其映射到对象。

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

使用ac-options确保显示名称

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

希望有所帮助。