Question

我必须使用SharePoint 2010中的内容编辑器Web部件创建表单。我必须使用angularjs基于组权限（例如：admin，user）隐藏某些项目或div。

Answer 1

有两种方法可以解决您的问题：

您可以在显示功能的帮助下，根据当前角色接收所有数据并显示它们。 jsFiddle1

Javascript代码：

var demoApp = angular.module('demoApp', []);
demoApp.controller('PermissionsForm', function ($scope) {

    // Mock data. You must receive it from your server
    $scope.mockData = {
        field1: {
        value: 'field1 value',
        roles: ['admin','user']
        },
        field2: {
            value: 'field2 value',
            roles: ['admin']
        },
            field3: {
            value: 'field3 value',
            roles: ['admin','user']
        },
        role: 'user'
    };

    $scope.displayField = function(fieldName){
        var foundRole = false;
        angular.forEach($scope.mockData[fieldName].roles, function(value, key) {
            if (value == $scope.mockData.role){    
                foundRole = true;
            }
        });
        return foundRole;
    };
});

HTML code：

<div data-ng-app="demoApp" data-ng-controller="PermissionsForm" class="main">
    <form>
        <div ng-if="displayField('field1')">
            <label for="field1">Field 1</label>
            <input id="field1" value="{{mockData.field1.value}}">
        </div>
        <div ng-if="displayField('field2')">
            <label for="field2">Field 2</label>
            <input id="field2"value="{{mockData.field2.value}}">
        </div>
        <div ng-if="displayField('field3')">
            <label for="field3">Field 3</label>
            <input id="field3"  value="{{mockData.field3.value}}">
        </div>
    </form>
</div>

您只收到与每个角色/权限相关的数据，并使用字段列表构建界面。这是隐藏信息的更安全的方法。 jsFiddle2

Javascript代码：

var demoApp = angular.module('demoApp', []);
demoApp.controller('PermissionsForm', function ($scope) {

    // Mock data. You must receive it from your server
    $scope.mockData = {
        field1: {
            value: 'field1 value'
        },
        field3: {
            value: 'field3 value'
        },
        field4: {
            value: 'field4 value'
        }
    };


    $scope.displayField = function(fieldName){
        if ( $scope.mockData[fieldName] == undefined )
            return false;
        return true;
    };
});

HTML code：

<div data-ng-app="demoApp" data-ng-controller="PermissionsForm" class="main">
    <form>
        <div ng-if="displayField('field1')">
            <label for="field1">Field 1</label>
            <input id="field1" value="{{mockData.field1.value}}">
        </div>
        <div ng-if="displayField('field2')">
            <label for="field2">Field 2</label>
            <input id="field2"value="{{mockData.field2.value}}">
        </div>
        <div ng-if="displayField('field3')">
            <label for="field3">Field 3</label>
            <input id="field3"  value="{{mockData.field3.value}}">
        </div>
        <div ng-if="displayField('field4')">
            <label for="field4">Field 4</label>
            <input id="field4"  value="{{mockData.field4.value}}">
        </div>
    </form>
</div>

从安全的角度来看，第二种解决方案是最好的，因为您不会在客户端（浏览器）中公开数据

如何使用sharepoint 2010中的angularjs根据用户权限/角色显示/隐藏div

1 个答案: