如何将 angular 中的单个 json 数据 "values" 绑定到命名的 $scope 变量（使用 SPARQL 查询返回的数据）？

Question

Newby Angular 如果问题很愚蠢，我深表歉意。检查了其他关于数据多样性、堆栈溢出、google ... 检查了 w3c 并尝试了几次 "try it and see solutions" 但就是无法让它发挥作用。

基本上，我使用 angular 绑定 classes 上的 SPARQL 查询结果和 dataset/query 中 classes 的数量使用 Fuseki Server 1-1.1.2 端点 (SPARQL 1.1)。（请参阅下面的问题后的代码）。

这很好地列出了 URI 格式的 class 名称和 URI 格式的实例计数，但我只想在结果中看到 "class" 的“#”之后的字符比整个 URI。

我最初尝试在查询中使用 REPLACE 和 STRAFTER 函数在 SPARQL 查询中执行此操作（即 SELECT (strafter(str(?class),"#") AS ?className)) 直接在 Fuseki 中工作正常，但 returns 空白导致尝试 angular 绑定。

通过阅读其他答案，我知道 getLocalName() 并且并非所有数据在“#”之后都有本地名称，但我需要访问 [=51= 中“#”之后的部分].所以我的问题是这个....

为了对返回的数据执行 URI/string 操作，我想知道如何将返回的单个数据项绑定到单个范围变量，即而不是 $scope.results = response.results.bindings 我可以做类似 $scope.results.class = response.results.bindings.class.value 的事情吗？（当我尝试它时它不起作用，也没有将 "results.bindings.class.value" 传递给字符串描述函数，因为我不知道如何在 ng-repeat 中调用它）。

总而言之，你能告诉我如何将个人 json "values" 绑定到命名的 $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 数据，但只在 class 值的视图中显示 # 之后的子字符串。这可以通过在 x.class.value 上应用过滤器来完成。那么您可以这样做：

假设您的数据return采用以下形式：

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

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

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。您可以将示例中的所有查询逻辑移动到可重复使用的 service/factory，这将使您的应用程序更干净。

Answer 2

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

所以不用

  <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>

而且效果很好！

如何将 angular 中的单个 json 数据 "values" 绑定到命名的 $scope 变量（使用 SPARQL 查询返回的数据）？

How to bind individual json data "values" in angular to named $scope variables (data returned using SPARQL query)?

string

binding

json

sparql

angularjs