Question

我有一个javascript数组如下：

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

我正在尝试创建一个angualrjs指令，该指令接受该数组并创建一个复选框列表，这些复选框在数组中使用这些关键字，并根据它们是否被选中使用true或false。

到目前为止我做的是：

创建了以下html：

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

以及以下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>'
    };
});

不确定如何从这里继续...

EDIT1：为了清除，我们假设我在json中调用了options的字符串数组。例如：

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

现在，当我使用此指令时，它将使用methods数组创建复选框列表，仅选中fetch和fetchAll，并允许我更改{{ 1}}通过在数组中添加或删除项目。

一般这应该适用于任何数组，给定预先制作的字符串列表。

我的解决方案：

所以我在这里解决了它：

我创建了一个对象而不是如下所示的数组：

methods

根据我使用的指令：

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

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

permissionData.html

Answer 1

我的解决方案：

所以这就是我解决它的方法：

我创建了一个对象而不是如下所示的数组：

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

根据我使用的指令：

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

这是permissionData.html contenct：

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

这是html本身的用法：

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

为javascript数组创建angularjs指令，将其转换为复选框列表

1 个答案: