当使用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;