1

私は angularjs をいじっていて、デュアル リスト ボックスを作成したいと考えています。左側のリストがすべてで、右側のリストには、あるリストから別のリストに「プッシュ」された項目が含まれています。アイテムを前後に押す矢印。

これは、単純なhtmlとangularjsを使用するだけで非常に簡単に実行できますが、次のように再利用可能にする方法を検討していました: <dual-list-box all-items='currentController.allItems' selected-items='currentController.selectedItems' />

2 つのリストを渡すことができる場所..コントローラーまたはリスト名に関係なく、デュアル リスト ボックス コントロールを使用できます。

これは可能ですか？どのように？ディレクティブが機能する可能性があると考えていますが、これについてどうすればよいかわかりません。

そして、私はこれについてかなり正しい方法で考えているかどうか確信が持てません....

4

2 に答える 2

0

これは実際の例です。これにより、ディレクティブ スコープ内で 2 つの間を移動する方法が保持されます。ただし、矢印を表示する代わりに (下の要素のみを移動するか、それぞれの矢印を移動するか、または何を意味するのかわかりませんでした)、要素をクリックして移動します。

myApp.directive('duallist', function() {
return {
    restrict: 'E',
    replace: true,
    scope: {
        data1: '=',
        data2: '='          
    },
    template: '<div><ul class="list"><li ng-repeat="datum in data1" ng-click="move(datum, data1)">{{datum}}</li></ul> <ul class="list"><li ng-repeat="datum in data2" ng-click="move(datum, data2)">{{datum}}</li></ul></div>',
    link: function(scope, ele, attrs) {
        scope.move = function(datum, dataset) {
            if (dataset == scope.data1) {
            scope.data2.push(datum);
            dataset.splice(dataset.indexOf(datum), 1);                  
            }
            else{
            scope.data1.push(datum);
            dataset.splice(dataset.indexOf(datum), 1);    
            }     
        }
    }
}

});

作業フィドル: http://jsfiddle.net/joshdmiller/HB7LU/

于 2013-10-03T17:09:53.357 に答える