1

我正在玩 angularjs 并想制作一个双重列表框 - 左侧列表是所有内容，右侧列表包含从一个列表“推送”到另一个列表的项目。箭头来回推动物品。

我可以很容易地在直接的 html 中使用 angularjs 来做到这一点，但我正在研究如何使它可重用，如下所示： <dual-list-box all-items='currentController.allItems' selected-items='currentController.selectedItems' />

我可以在哪里传递两个列表..所以无论控制器或列表名称如何，我都可以使用我的双列表框控件。

这可能吗？如何？我认为该指令可能有效，但我不确定如何去做。

而且我不确定我是否以正确的方式考虑这个问题......

4

2 回答 2

4

指令当然应该在这里工作。就像是：

module.directive('dualListBox', function() {
    return {
        restrict: 'E',
        scope: { // set up isolated scope, bind to parent scope's properties (declared in view)
            allItems: '=',
            selectedItems: '='
        },
        template: 'HTML template, can bind to allItems and selectedItems in isolated scope',
        link: (scope, elm, attr) {
            // use to scope.allItems & scope.selectedItems here
        }
    }
});

这就是想法。在实施过程中，您可能需要参考指令文档。

于 2013-10-03T16:23:58.807 回答
0

这是一个工作示例，这使在指令范围内的两者之间移动的方法保持不变。然而，不是有箭头（不确定你的意思，即只移动底部元素，或者每个箭头，或者什么），你只需点击一个元素来移动它。

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 回答