How can you assign various models to a single directive?

Question

How can you assign various models to a single directive?

Exploring angularjs, I am interested in creating a dual list box with two lists - one on the left containing all items, and another on the right for selected items that can be transferred back and forth. Using arrows to facilitate this movement.

While it is achievable using plain HTML and angularjs, I am intrigued by the idea of making it reusable through something like:

<dual-list-box all-items='currentController.allItems' selected-items='currentController.selectedItems' />

This way, I could pass in different lists regardless of the controller or list names, ensuring versatility for my dual list box control.

Is there a way to make this possible? Any thoughts on how to approach this? I believe a directive might be the solution, but I am uncertain about the implementation.

Perhaps my approach needs some refining...

angularjs angularjs-directive

Answer 1

Answer №1

To make this work, you can create a directive like the following example:

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

Make sure to consult the directive documentation while implementing.

Answer 2

To make this work, you can create a directive like the following example:

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

Make sure to consult the directive documentation while implementing.

Answer 3

Answer №2

Check out this demonstration, which maintains the method for transitioning between the two elements within the directives scope. Instead of utilizing arrows (as it was unclear if you meant moving only the bottom element, having an arrow for each element, or something else), you simply have to click on an element to shift it over.

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

Answer 4

Check out this demonstration, which maintains the method for transitioning between the two elements within the directives scope. Instead of utilizing arrows (as it was unclear if you meant moving only the bottom element, having an arrow for each element, or something else), you simply have to click on an element to shift it over.

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

How can you assign various models to a single directive?

Answer №1

Answer №2

Similar questions

How to manipulate local JSON files using AngularJS

Embedding $sce functionality within a controller

Showing Information Using Angular

Invoke a Python function from JavaScript

Data not populating correctly in MEAN Stack application

Page not found: The requested file does not exist

Ionic retrieves a filtered array of JSON data

Invalid Credentials - ajax authentication - Symfony2 / AngularJS / FosUserBundle

What is the best way to change a variable in an AngularJS view?

Determining the cursor location within a character in a div that is content editable using AngularJS

How can I programmatically refresh a recursive ng-include in AngularJS?

Array not being updated and reset with submitted form information

What is the best way to append an element to the end of an array in Angular JS?

Conducting an AngularJS AJAX call within a Symfony2 environment and utilizing Doctrine to generate a JSON

Tips on transforming JSON data into a hierarchical/tree structure with javascript/angularJS

What are effective strategies for safeguarding my AngularJS application code, particularly from unauthorized access through the browser's source code?

obtain direct access to the $scope variable when using ng-if

"Step-by-step guide on populating a select box with data from the scope

Deactivate an option within an angularjs multi-select menu

What is the purpose of ng-submit blocking the default action?