Question

我正在玩angularjs并想制作一个双列表框 - 左边的列表就是一切，右边的列表包含从一个列表到另一个列表的“推送”项。箭头来回推动物品。

我可以通过直接的html和使用angularjs轻松地做到这一点，但我正在研究如何使其可重复使用，如下所示： <dual-list-box all-items='currentController.allItems' selected-items='currentController.selectedItems' />

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

这可能吗？怎么样？我认为该指令可能有效，但我不确定如何解决这个问题。

而且我不确定我是否正确地考虑这个......

Answer 1

指令当然应该在这里工作。类似的东西：

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
        }
    }
});

这就是主意。您可能希望在实施期间参考documentation for directive。

Answer 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/

在指令上设置多个模型？

2 个答案: