26

テーブル内の行を再配置する機能 (ドラッグ アンド ドロップを使用して行を並べ替える) が必要でした。 また、列の配置のインデックスもモデル内で変更する必要があります。

これに似たようなことをするにはどうすればよいですか: http://jsfiddle.net/tzYbU/1162/ Angular Directive を使用して?

私は次のようにテーブルを生成しています:

<table id="sort" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th class="header-color-green"></th>
      <th ng-repeat="titles in Rules.Titles">{{titles.title}}</th>
    </tr>
  </thead>
  <tbody ng-repeat="rule in Rules.data">
    <tr>
      <td class="center"><span>{{rule.ruleSeq}}</span></td>
      <td ng-repeat="data in rule.ruleData">{{statusArr[data.value]}}</td>
    </tr>
  </tbody>
</table>
4

6 に答える 6

48

やったよ。以下の私のコードを参照してください。

HTML

<div ng:controller="controller">
    <table style="width:auto;" class="table table-bordered">
        <thead>
            <tr>
                <th>Index</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody ui:sortable ng:model="list">
            <tr ng:repeat="item in list" class="item" style="cursor: move;">
                <td>{{$index}}</td>
                <td>{{item}}</td>
            </tr>
        </tbody>{{list}}
        <hr>
</div>

ディレクティブ (JS)

var myapp = angular.module('myapp', ['ui']);

myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "thre", "four", "five", "six"];
});

angular.bootstrap(document, ['myapp']);
于 2013-09-05T12:51:47.970 に答える
5

AngularJS は、実際には DOM 要素を操作するために構築されたのではなく、ページの HTMLを拡張するために構築されました。

この質問とこのウィキペディアのエントリを参照してください。

DOM 操作については、jQuery/mootools/etc が適しています (ヒント: jsFiddle リンクの例)。

おそらく、AngularJS を使用して要素の順序を追跡し、モデルを更新することができます。ディレクティブを使用してこれを行う方法はわかりませんが、次のコードが役立つ場合があります

var MyController = function($scope, $http) {
    $scope.rules = [...];
    ...

}

var updateRules = function(rule, position) {
    //We need the scope
    var scope = angular.element($(/*controller_element*/)).scope(); //controller_element would be the element with ng-controller='MyController'

    //Update scope.rules
}

次に、リストを並べ替えるときはupdateRules()、変更されたルールとモデル内の新しい位置を指定して呼び出すだけです。

于 2013-09-04T13:21:33.743 に答える
1

RubaXa/Sortable に加えて、 angular-ui-treeという angularjs ライブラリがもう 1 つ利用可能です。ドラッグ アンド ドロップに加えて、要素をツリー構造に配置したり、要素 (ノード) を追加および削除したりできます。

例については、このリンクを参照してください

http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example .

githubはこちらをご覧ください

https://github.com/angular-ui-tree/angular-ui-tree .

于 2015-11-26T11:17:01.947 に答える