我正在使用angular-dragula编写一个小测试代码,我已经设法让拖放工作正常工作,但它并没有更新源数据数组。
我在角度控制器中声明了一些变量:
$scope.todos=['Stuff','Thangs'];
$scope.plan=new Array(($scope.endTime - $scope.startTime)*(60/$scope.timeBlock));
for(var i=0;i<$scope.plan.length;i++){
$scope.plan[i]=["-"];
}
这可能不是最好的初始化方法,但是我得到了一个数组数组,每个数组都包含一个“占位符”字符。
然后HTML将其绘制出来:
<div ng-app='dayplannerApp' ng-controller="MainCtrl">
<div class='wrapper'>
<button ng-click='dump()'>Dump</button>
<div class='container' id='source-box' dragula='"first-bag"' dragula-model='todos'>
<div id="source" ng-repeat='text in todos' ng-bind='text'></div>
</div>
<hr>
<div class='container'><pre>{{plan[0] | json}}</pre></div>
<div class='container'><pre>{{plan[1] | json}}</pre></div>
<hr>
<table ng-repeat="n in Range()" border='1'>
<tr ng-class-odd="'odd'" ng-class-even="'even'" ><td width='20%'>{{n}}</td><td>
<div class='container' dragula='"first-bag"' dragula-model='plan[$index]'>
<div ng-attr-id="{{ 'block-' + n}}" ng-repeat='text in plan[$index]' ng-bind='text' ng-click='setId($event)'></div>
</div></td></tr>
</table>
</div>
</div>
这似乎有效,我可以将'stuff'或'thangs'拖到包含ng-repeat的div并将它们放在那里,如果我在前两个中丢弃东西,则会更新两个“pre”容器行。
但是当我尝试使用:
转储底层的“plan”数组时console.log($scope.plan);
我只获得了仅包含占位符的原始数组数组。我是否在模型分配方面做错了什么?还是绑定?为什么计划[1]在div中更新,而不是在javascript中更新?
答案 0 :(得分:0)
我设法做的是重写:
for (var hour = $scope.startTime; hour < $scope.endTime; hour++) {
for (var mins = 0; mins < 60; mins+=$scope.timeBlock){
var minVal = mins;
if (mins===0){
minVal='00';
}
result.push(
{
'Time': hour + ':' + minVal,
'ToDo': []
});
}
}
return result;
然后我用它作为来源:
<table border=1 style="table-layout:fixed;">
<tr><th width='10%'>Time</th><th width='80%'>Activity</th><th width='5%'>Drop here</th></tr>
<span>
<tr ng-repeat="n in Day" ng-class-odd="'odd'" ng-class-even="'even'" >
<td width='20%'>{{n.Time}}</td>
<td width='80%'>{{n.ToDo[0]}}</td>
<td width='10%' style='background-color:black;overflow:hidden' class='container' dragula='"first-bag"' dragula-model='n.ToDo'>
{{n.ToDo}}
</td>
</tr>
</span>
</table>
不确定问题是什么。计划[$ index]是否因为模型不会更新?