将我在HTML / JS中的工作XML更正分配给angular js

时间:2016-06-29 13:12:37

标签: angularjs xmlhttprequest odata xml-serialization integration

我的后端提供带有标记的XML响应,首先必须对其进行更正以进行处理。我通过将其转换为字符串,进行更正并将其转换回XML来实现这一目的。

我希望它也适用于AngularJS,那么如何在模块/控制器中分配这些内容呢?

现在,我的模块和我的控制器看起来像这样(从另一个例子中复制):

<script>var myModule = angular.module("MyModule", ['ODataResources']);
myModule.controller("MyController", function ($scope, $odataresource) {
$scope.results =


        $odataresource("http://services.odata.org/V4/Northwind/Northwind.svc/Products")
                .odata()
                .filter('UnitPrice', '>', 10)
                .filter('Discontinued', true)
                .orderBy('UnitsInStock', 'asc')
                .expand('Category')
                .query();
});</script>

当您在此页面上插入以下代码时,我的解决方案正在使用HTML / JS:http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_replace

 <!DOCTYPE html>
 <html>
 <style>
 table,th,td {
 border : 1px solid black;
 border-collapse: collapse;
 }
 th,td {
 padding: 5px;
 }
</style>
<body>

<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
  myFunction(xhttp);
}
};
xhttp.open("GET",        "https://xsgeos0015309874trial.hanatrial.ondemand.com/s0015309874trial/xsgeo/geotabelle/geoDB/GeotabelleODataService.xsodata/Adressen?$top=2", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;

var s1 = new XMLSerializer().serializeToString(xmlDoc);
var s2 = new String(s1);
var replaced = s2.split('d:Latitude').join('Latitude');
var replaced2 = replaced.split('d:Longitude').join('Longitude');
var replaced3 = replaced2.split('d:Hausnummer').join('Hausnummer');
var replaced4 = replaced3.split('d:PLZ').join('PLZ');
var replaced5 = replaced4.split('d:ortsname').join('ortsname');
var replaced6 = replaced5.split('d:Street').join('Street');
var replaced7 = replaced6.split('m:type').join('type');
var replaced8 = replaced7.split('m:properties').join('properties');
console.log(replaced8);

var result = $.parseXML(replaced8);
alert(result);
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = result.getElementsByTagName("properties");

for (i = 0; i < 2; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue +
"</td></tr>";

}
document.getElementById("demo").innerHTML = table;


}
</script>


</body>
</html>

提前谢谢。

1 个答案:

答案 0 :(得分:0)

使用运行块作为最简单的迁移路径:

var app = angular.module('foo', []);

function foo()
  {
  function loadDoc() 
    {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
      {
      if (xhttp.readyState == 4 && xhttp.status == 200) 
        {
        myFunction(xhttp);
        }
      };
      
    xhttp.open("GET", "data:application/xml,<root></root>", true);
    xhttp.send();
    }
  
  function myFunction(xml) 
    {
    var table="<tr><th>Artist</th><th>Title</th></tr>";  
  
    document.getElementById("demo").innerHTML = table;
    }

  loadDoc();
  }

app.run(foo);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="foo"></div>
<table id="demo"></table>

<强>参考