我正在使用AngularJS UI Sortable指令,我试图将数据从我的视图拉到我的控制器中,并在每次点击时更新/停止排序。我正在创建一个空白数组,然后将$scope.areas
附加到空白数组。我可以通过ng-repeat
显示内容。但是,当我console.log(areas)
时,我收到了undefined
。
查看
<div class="panel-body">
<ul ui-sortable="sortableOptions" ng-model="areas" class="uk-nestable">
<li data-item="{{area.label}}" data-item-id="{{area.order}}" ng-repeat="area in areas">
<div class="uk-nestable-item mainarea-blue">
<div class="uk-nestable-handle mainarea-text-white"></div>
<div data-nestable-action="toggle"></div>
<div class="list-white">{{area.label}}</div>
</div>
</li>
</ul>
</div>
CONTROLLER
//create a blank array
var tmpList = [];
//attaches ng-model scope to tmpList
$scope.areas = tmpList;
console.log(areas);
//changed old sort to new sort
$scope.sortingLog = [];
$scope.sortableOptions = {
//creates a log entry of the new update view
update: function(e, ui) {
var logEntry = tmpList.map(function(i){
return i.value;
}).join(', ');
//displays the update text and array
$scope.sortingLog.push('Update: ' + logEntry);
},
stop: function(e, ui) {
// this callback has the changed model
var logEntry = tmpList.map(function(i){
return i.value;
}).join(', ');
$scope.sortingLog.push('Stop: ' + logEntry);
}
};
我的目标是以正确的排序顺序显示area.label。例如;我有3个无序列表 - 地板,地下室,厨房,我想将订单更改为地下室,地板,厨房。当我正在更改排序顺序时,它正在更新并停止排序。
我可能没有做最好的解释自己的工作,所以这里有类似的代码... http://codepen.io/thgreasi/pen/jlkhr。