AngularJS ng-repeat拼接数组未正确更新DOM

时间:2015-01-08 00:04:26

标签: arrays angularjs angularjs-ng-repeat ng-repeat

当使用ng-repeat从通过拖放系统填充的数组创建按钮时,我遇到了一个问题。

Here is a screenshot of the page。您可以假设使用数字和符号在dropzone(灰色区域)中创建表达式。在屏幕截图中,我有一个显示数组内容的预标签。该数组中只有一个对象,但重复仍然显示两个。有什么我不理解ng-repeat在更新数组时如何处理自身?



$scope.arr = [];
//gets called when a number or symbol is dropped
$scope.dropItem = function(draggable, dropzone){
  if(dropzone) {
    var obj = {
      name: draggable.name,
      fragmentId: draggable.fragmentId,
      controlId: draggable.controlId,
      id: hal.utils.generateGuid()
    };

    $scope.arr.push(obj);
    $scope.$apply();
  }
};
//callback for draggables inside dropzone
$scope.reorderItem = function(draggable, dropzone){
  //reorder
  if(dropzone){

  }
  //remove
  else {
    for(var i = 0; i < $scope.arr.length; i++){
      if($scope.arr[i].id == draggable.value){
        $scope.arr.splice(i, 1);
        $scope.$apply();
      }
    }
  }
};
HTML
&#13;
<td class="equation-drop-zone" hal-dropzone="PerimeterEquation" max="10">
  <pre>{{arr}}</pre>
  <button
          ng-repeat="button in arr track by button.id"
          hal-draggable="{{button.name}}"
          value="{{button.id}}"
          hal-text
          control-id="{{button.controlId}}"
          fragment-id="{{button.fragmentId}}"
          drop-callback="reorderItem"
  ></button>
</td>
&#13;
&#13;
&#13;

0 个答案:

没有答案