0

angular-dragulaを使用して小さなテストコードに取り組んでおり、ドラッグアンドドロップを機能させることができましたが、ソースデータ配列を更新していません.

angular コントローラーでいくつかの変数を宣言します。

$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 にドラッグしてそこにドロップできます。最初の 2 行にドロップすると、2 つの「前の」コンテナが更新されます。

しかし、基になる「計画」配列を次のようにダンプしようとすると:

console.log($scope.plan);

プレースホルダーのみを使用して、配列の元の配列を取得するだけです。モデルの割り当てに何か問題がありますか? またはバインディング？plan[1] が div で更新されるのに、javascript では更新されないのはなぜですか?

4

1 に答える 1

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>

何が問題だったのかよくわかりません。モデルが更新されないというのは、plan[$index] ですか?

于 2016-05-15T18:35:42.930 に答える