如何使用SharePoint2013中使用angularJS登录的用户筛选列表结果

时间:2016-09-23 21:20:02

标签: javascript angularjs json rest sharepoint-2013

这是我第一次发帖提问,请原谅我无知。

概述:我目前正在使用REST pull提取SharePoint 2013列表数据以返回JSON数据。下面是我的JS和HTML。

问题:我需要过滤数据以仅显示由登录用户创建的项目。我正在努力的最终结果是一个页面,其中只有由登录的用户显示在表格中。

JS

    var myAngApp = angular.module('SharePointAngApp', []);   
    myAngApp.controller('spCustomerController', function ($scope, $http){   
        $http({
            method: 'GET',   
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('ITEquipmentRequests')/items?$select=*",   
            headers: { "Accept": "application/json;odata=verbose"}   
            }).success(function (data, status, headers, config) {
        $scope.customers = data.d.results;
    }).error(function (data, status, headers, config) {
    });
});

HTML

<div ng-controller="spCustomerController">   

    <table id="requestTable" class="table table-hover table-bordered"> 

        <tr id="requestTableHeader">   
            <th>Name</th>
            <th>Supervisor</th>
            <th>Section Chief</th>
            <th>ISO</th>
            <th>Pentad</th>
            <th>FCIO</th>
            <th>Status</th> 
        </tr>

        <tr ng-repeat="customer in customers">   
            <td class="col-md-4"><a ng-href="/PHX_IRM/ITEquip/ITEquipmentRequests/{{customer.Title}}">{{customer.Title}}</a></td>
            <td class="col-md-1"><img class="statusIcon" src="{{customer.TextPicture}}" alt="Status"></td>
            <td class="col-md-1"><img class="statusIcon" src="{{customer.SectionChief}}" alt="Status"></td>
            <td class="col-md-1"><img class="statusIcon" src="{{customer.ISO}}" alt="Status"></td>
            <td class="col-md-1"><img class="statusIcon" src="{{customer.Pentad}}" alt="Status"></td>
            <td class="col-md-1"><img class="statusIcon" src="{{customer.FCIO}}" alt="Status"></td>
            <td class="col-md-2">{{customer.Status}}</td>
        </tr>   
    </table>
</div>   

任何帮助将不胜感激。谢谢你的时间。

2 个答案:

答案 0 :(得分:0)

如果要在客户端过滤结果,可以在转发器中使用角度过滤器。

<tr ng-repeat="customer in customers | filter : customer == loggedInUser">   

答案 1 :(得分:0)

您可以考虑以下选项:

通过CAML查询过滤列表项

通过CAML查询过滤列表项。只有满足查询的项目才会从服务器返回,为此目的替换请求:

$http({
       method: 'GET',   
       url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('ITEquipmentRequests')/items?$select=*",   
       headers: { "Accept": "application/json;odata=verbose"}   
}) 

//request endpoint
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/getitems";
//construct CAML query to return list items created by current user
var queryXml = "<View><Query><Where><Eq><FieldRef Name='Author' LookupId='True'/><Value Type='Lookup'>" + _spPageContextInfo.userId + "</Value></Eq></Where></Query></View>";
//query payload
var queryPayload = { 
   'query':{ 
       '__metadata': { 'type': 'SP.CamlQuery' },
       'ViewXml': queryXml
    } 
}; 



$http({
       method: "POST",
       url : endpointUrl,
       data: queryPayload,  
       headers: {
               "Content-Type" : "application/json;odata=verbose",
               "Accept": "application/json;odata=verbose",
               "X-RequestDigest": document.getElementById('__REQUESTDIGEST').value 
       }          
}) 

说明:

使用以下端点通过POST reqest调用CAML查询:

/_api/web/lists/getbytitle('<listTitle>')/getitems
  

从绩效角度来看,它代表了最好的方法。

使用Angular filter

替换行:

<tr ng-repeat="customer in customers">

<tr ng-repeat="customer in customers | filter : isCurrentCustomer"> 

并在控制器中声明isCurrentCustomer函数,如下所示:

$scope.isCurrentCustomer = function(customer){
    return (customer.AuthorId == _spPageContextInfo.userId);
}