UI AngularJS Sortable - 附加到范围时获取未定义的错误

时间:2015-09-15 19:54:44

标签: angularjs

我正在使用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

0 个答案:

没有答案