Question

我是开发新手。我正在努力过滤与sharepoint列表中特定字段值相关的数据。我使用AngularJs和REST从SharePoint列表中获取所有项目。我需要根据该国家/地区的国家/地区和网站过滤数据。

非常感谢任何帮助。

我将所有项目存储在一个变量中

$scope.items= data.data.d.results;

在下面的数据中，Region，Country，Sites和contact是SharePoint列表字段名称，My data看起来像这样：

    [
  { "Region": "EU",  "Country": "Germany",   "Sites": "Germansite1",   "contact": "person1" },
  { "Region": "EU",  "Country": "Spain",     "Sites": "Spainsite",     "contact": "person2" },
  { "Region": "EU",  "Country": "Germany",   "Sites": "Germansite2",   "contact": "person3" },
  { "Region": "NA",  "Country": "USA",       "Sites": "USsite",        "contact": "person4" },
  { "Region": "SA",  "Country": "Mexico",    "Sites": "Mexsite",       "contact": "person5" },
  { "Region": "EU",  "Country": "Hungary",   "Sites": "Hunsite",       "contact": "person6" },
  { "Region": "AP",  "Country": "China",     "Sites": "Csite",         "contact": "person7" },
  { "Region": "AP",  "Country": "Singapore", "Sites": "Singaporesite", "contact": "person8" },
  { "Region": "AP",  "Country": "India",     "Sites": "indiasite",     "contact": "person9" },
  { "Region": "EU",  "Country": "Italy",     "Sites": "ItSite",        "contact": "person10"} 
]

我试过这样做：

<div ng-repeat="item in items | filter: {Country:'Singapore'}">{{item.Country}}</div>

但如果我在此使用过滤器，那么如果将新国家/地区添加到列表中，则无法过滤。有什么帮助吗？

Answer 1

我试着按照您在评论中描述的内容进行操作。这就是我想出的：

PLAIN JS

var data = [
  { "Region": "EU",  "Country": "Germany",   "Sites": "Germansite1",   "contact": "person1" },
  { "Region": "EU",  "Country": "Spain",     "Sites": "Spainsite",     "contact": "person2" },
  { "Region": "EU",  "Country": "Germany",   "Sites": "Germansite2",   "contact": "person3" },
  { "Region": "NA",  "Country": "USA",       "Sites": "USsite",        "contact": "person4" },
  { "Region": "SA",  "Country": "Mexico",    "Sites": "Mexsite",       "contact": "person5" },
  { "Region": "EU",  "Country": "Hungary",   "Sites": "Hunsite",       "contact": "person6" },
  { "Region": "AP",  "Country": "China",     "Sites": "Csite",         "contact": "person7" },
  { "Region": "AP",  "Country": "Singapore", "Sites": "Singaporesite", "contact": "person8" },
  { "Region": "AP",  "Country": "India",     "Sites": "indiasite",     "contact": "person9" },
  { "Region": "EU",  "Country": "Italy",     "Sites": "ItSite",        "contact": "person10"} 
];

var output = document.getElementById("table-output"),
  infoField = document.getElementById("info-field"),
  keys = { headers: [ "Country", "Sites" ], info: "contact" };
  
output.appendChild(buildTable(data, keys));

function buildTable(data, keys) {
  var table = document.createElement("table");
  var header = document.createElement("thead");
  
  keys.headers.forEach(title => header.appendChild(drawCell("th", title)));
  table.appendChild(header);
  
  data.forEach(item => {
    var row = document.createElement("tr");
    keys.headers.forEach(title => row.appendChild(drawCell("td", item[title])));
    
    row.addEventListener("click", () => {
      infoField.textContent = ' ' + item[keys.info];
    });
    table.appendChild(row);
  });
  
  function drawCell(tag, text) {
    var cell = document.createElement(tag);
    cell.textContent = text;
    return cell;
  }
  
  return table;
}

table {
  border: 1px solid #444;
  border-collapse: collapse;
}

tr:nth-child(even) {
  background: #ddd;
}

tr:hover {
  cursor: pointer;
  background: #eee;
}

td {
  padding: .5em 1em;
  border: 1px solid #aaa;
}

<div style="padding: .5em">
  Contact : 
  <span id="info-field"></span>
</div>
<div id="table-output" style="font-family: cursive"></div>

Answer 2

如何制作自定义过滤器并将想要的过滤器值分配到：
每个 dynamicRegion，dynamicCountry，dynamicSites，dynamiccontact 变量。

＆＃13;

angular.module('myApp', []).controller('myCtrl', function($scope){
    $scope.items=  [
  { "Region": "EU",  "Country": "Germany",   "Sites": "Germansite1",   "contact": "person1" },
  { "Region": "EU",  "Country": "Spain",     "Sites": "Spainsite",     "contact": "person2" },
  { "Region": "EU",  "Country": "Germany",   "Sites": "Germansite2",   "contact": "person3" },
  { "Region": "NA",  "Country": "USA",       "Sites": "USsite",        "contact": "person4" },
  { "Region": "SA",  "Country": "Mexico",    "Sites": "Mexsite",       "contact": "person5" },
  { "Region": "EU",  "Country": "Hungary",   "Sites": "Hunsite",       "contact": "person6" },
  { "Region": "AP",  "Country": "China",     "Sites": "Csite",         "contact": "person7" },
  { "Region": "AP",  "Country": "Singapore", "Sites": "Singaporesite", "contact": "person8" },
  { "Region": "AP",  "Country": "India",     "Sites": "indiasite",     "contact": "person9" },
  { "Region": "EU",  "Country": "Italy",     "Sites": "ItSite",        "contact": "person10"} 
]
  var dynamicRegion = "EU";
  var dynamicCountry = "Germany";
  var dynamicSites = "";
  var dynamiccontact = "";
  $scope.myFilter = function(item){
    if((!dynamicRegion || dynamicRegion == item.Region) && (!dynamicCountry || dynamicCountry == item.Country) && (!dynamicSites || dynamicSites == item.Sites) && (!dynamiccontact || dynamiccontact == item.contact)) return true;
    return false;
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myCtrl'>
 <div ng-repeat="item in items | filter: myFilter">{{item.Country}}</div>
    
</div>

＆＃13;

使用angularJs过滤Sharepoint列表数据

2 个答案: