Creating angularjs directive for javascript array that turns it into a checkbox list

Question

I have a javascript array as follows:

['create', 'delete', 'deleteList', 'fetch', 'fetchAll', 'patch', 'replaceList', 'update']

I am trying to create an angualrjs directive that takes that array and creates a list of checkboxes that uses these keywords in the array and uses true or false based on whether they are checked or not.

What I did so far is this:

Created the following html:

<span ng-repeat="method in option.methods">
    <permission-method method="method"></permission-method>
</span>

and the following javascript:

'use_strict';

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

rcDirectives.directive('permissionMethod', function(){
    return {
        restrict: 'E', // element
        scope: {
            method: '='
        },
        templateUrl: '<label>{{method}} <input type="checkbox" value="{{method}}"><label>'
    };
});

Not sure how to continue from here...

EDIT1: To clearify, let's assume I have that array of strings in a json I call options. For example:

option = 
{ 
    name: "some name", 
    methods = ['fetch', 'fetchAll']
}

Now, when I use this directive, it will create the checkbox list using the methods array with only the fetch and fetchAll checked, and also allow me to change the methods by adding or removing items from the array.

In general this should work for any array, given a premade list of strings.

MY SOLUTION:

So here's how I solved it:

I've created an object instead of array like as follows:

{ create : false, 'delete' : false, deleteList : false, fetch : true, fetchAll : true, patch : false, replaceList : false, update : false }

And on the directive I used this:

rcDirectives.directive('permissionData', function(){
    return {
        restrict: 'E', // element
        scope: {
            data: '='
        },
        templateUrl: 'permissionData.html',
    };
});

This is permissionData.html contenct:

<div>
    <span ng-repeat="(key, value) in data">
        <label>{{key}}
        <input type="checkbox" ng-model="data[key]"> 
        </label>
    </span>
</div>

You need to clarify a bit here. You are sending in a list of strings, but want them to act as bools? — Index
– Index, Commented Nov 16, 2014 at 13:14
@KGChristensen I want to take that list of strings, and create a directive that (if needed) create a list of its own based on that string list with lets say key (the string) value (bool). — Dalai Lama
– Dalai Lama, Commented Nov 16, 2014 at 13:17
I think just having them set as key : value booleans would be much easier. methods= [ 'fetch': true, 'fetchAll': true, 'otherMethod': false] Then you can just use ng-show="method" to determine whether that method is usable in the DOM. I would need to see more code to give you a real demonstration. — Rorschach120
– Rorschach120, Commented Nov 16, 2014 at 20:10

Dalai Lama · Accepted Answer · 2014-11-17 09:50:04Z

1

MY SOLUTION:

So here's how I solved it:

I've created an object instead of array like as follows:

{ create : false, 'delete' : false, deleteList : false, fetch : true, fetchAll : true, patch : false, replaceList : false, update : false }

And on the directive I used this:

rcDirectives.directive('permissionData', function(){
    return {
        restrict: 'E', // element
        scope: {
            data: '='
        },
        templateUrl: 'permissionData.html',
    };
});

This is permissionData.html contenct:

<div>
    <span ng-repeat="(key, value) in data">
        <label>{{key}}
        <input type="checkbox" ng-model="data[key]"> 
        </label>
    </span>
</div>

And this is the usage in the html itself:

<permission-data data=data></permission-data>

edited Nov 17, 2014 at 9:50

answered Nov 17, 2014 at 9:36

Dalai Lama

3991 gold badge4 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating angularjs directive for javascript array that turns it into a checkbox list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related