Question

Newby to Angular如果一个愚蠢的问题，请道歉。已检查过有关数据存量，堆栈溢出，谷歌的其他问题... 检查了w3c并尝试了几次“尝试并看到解决方案”，但却无法让它发挥作用。

基本上，我使用angular来绑定数据集/查询中的类和类数的SPARQL查询的结果使用Fuseki Server 1-1.1.2端点（SPARQL 1.1）。（问题后见下面的代码）。

这很好地列出了URI格式的类名和URI格式的实例计数，但我想只在结果中看到“＃”后面的字符而不是整个URI。

我最初尝试在查询中使用REPLACE和STRAFTER函数在SPARQL查询中执行此操作（即SELECT（strafter（str（？class），“＃”）AS？className））在Fuseki中可以正常工作但返回空白导致尝试角度绑定。

通过阅读其他答案，我知道getLocalName（）并且并非所有数据都在“＃”之后具有本地名称，但我需要在javascript中访问“＃”之后的部分。所以我的问题就是这个......

为了对返回的数据执行URI /字符串操作，我想知道如何绑定返回到各个范围变量的单个数据项，而不是$ scope.results = response.results.bindings 我可以做一些像$ scope.results.class = response.results.bindings.class.value这样的事情吗？（当我尝试它时它没有工作，也没有将“results.bindings.class.value”传递给字符串描述函数，因为我无法弄清楚如何在ng-repeat中调用它。）

所以请总结一下，您能告诉我如何将单个json“值”绑定到命名的$ scope变量吗？

感激不尽的任何帮助。我必须使用SPARQL，javascript / HTML / angular。

这是我的代码。

<!DOCTYPE html>
<html >
<script src=     "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="queryCtrl"><table>
 <tr ng-repeat="x in results">
    <td>{{x.class.value}}</td>
    <td>{{x.count.value}}</td>
  </tr>
</table></div>

<script>
var app = angular.module('myApp', []);
app.controller('queryCtrl', function($scope, $http) {
   var query = encodeURIComponent("SELECT  ?class (COUNT(?s) AS ?count ) { ?    s a ?class } GROUP BY ?class ORDER BY ?count");
   var endpoint = "http://localhost:3030/dataset/query";
   $scope.results = [];
   $http.get("http://localhost:3030/dataset/query?    query="+query+"&output=json")
   .success(function (response) {
    $scope.results = response.results.bindings;
    /* for debugging*/
    if ( window.console && window.console.log ) {
       // console is available, write message if something has happened
       console.log(response.results);
    }
   });

});
</script>

</body>
</html>

Answer 1

如果我正确理解了您的问题，您希望绑定到json数据，但只显示类值视图中#之后的子字符串。这可以通过在x.class.value上应用过滤器来完成。所以，你可以这样做：

假设您的数据以下列形式返回：

{"results": {"bindings": [
  {"class": {"value": "http://foo.bar#foo"}, "count": {"value": 123}}
  ]
}}

检索json文件并使用返回值填充范围变量：

app.controller('queryCtrl', function($scope, $http) {
  $scope.results = [];
  $http.get("results.json")
    .then(function (response) {
      $scope.results = response.data.results.bindings;
    });
});

在视图中应用过滤器：

<td>{{x.class.value | myFilter}}</td>

定义过滤器以在#：

之后提取子字符串

app.filter('myFilter', function() {
  return function(name) {
    var n = name.indexOf('#');// or lastIndexOf
    return name.substring(n + 1);
  }
});

这是一个有效的plunker。

P.S。您可以将示例中的所有查询逻辑移动到可重复使用的服务/工厂，这将使您的应用程序更清洁。

Answer 2

花了一天时间，一个解决方案就是将类URI表示转换为SPARQL查询中的字符串，并在ng-repeat中使用自定义角度过滤器。

所以而不是

  <tr ng-repeat="x in results">
    <td>{{ x.class.value}}</td>
    <td>{{ x.count.value }}</td>
  </tr>

我有

  <tr ng-repeat="x in results">
    <!--<td>{{ x }}</td>-->
    <td>{{ x.className.value | localClassName}}</td>
    <td>{{ x.count.value }}</td>
  </tr>

而不是

SELECT ?class (COUNT(?s) AS ?count) {?s a ?class} GROUP BY ?class ORDER BY     DESC(?count)

我有

SELECT (str(?class) AS ?className) (COUNT(?s) AS ?count) {?s a ?class} GROUP     BY ?class ORDER BY DESC(?count)

并附加到angular.module.controller是新过滤器“localClassName”

.filter("localClassName", function(){
        return function(value){
            /*var startName = value.indexOf("#") + 1;*/
            return String(value).slice(value.indexOf("#") + 1);
        }
   })

现在整个代码的内容如下：

<!DOCTYPE html>
<html>
<script src=         "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="queryCtrl">

<table>
  <tr ng-repeat="x in results">
    <td>{{ x.className.value | localClassName}}</td>
    <td>{{ x.count.value }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('queryCtrl', function($scope, $http) {
   var query = encodeURIComponent("SELECT (str(?class) AS ?className)     (COUNT(?s) AS ?count) {?s a ?class} GROUP BY ?class ORDER BY DESC(?count)");
   var endpoint = "http://localhost:3030/dataset/query";
   $http.get("http://localhost:3030/dataset/query?    query="+query+"&output=json&stylesheet=")
   .success(function (response) {
    $scope.results = response.results.bindings;
    /* for debugging*/
    if ( window.console && window.console.log ) {
       // console is available, write message if something has happened
       console.log(response.results);
    }

   })
}).
   filter("localClassName", function(){
        return function(value){
            /*var startName = value.indexOf("#") + 1;*/
            return String(value).slice(value.indexOf("#") + 1);
        }
   })

</script>

</body>
</html>

它有效！

如何将角度中的单个json数据“值”绑定到命名的$ scope变量（使用SPARQL查询返回的数据）？

2 个答案: