finden String und ersetzen mit einem anderen html/AngularJS

Question

Hallo Ich habe ein Objekt wie dieses bekam:

{ 
    "Properties": [ 
     "Name: Steven", 
     "Country: Australia" 
    ] 
} 

ich diese Aufgabe mit dieser Zeichenfolge aus unserem Backend. Jetzt muss ich es in unserem Popup in HTML zeigen. Ich mache es wie folgt aus:

<div>{{ object.Properties }}</div> 

Es funktioniert, bekomme ich die Zeichenfolge im Follow-Format in meinem: Pop-up Name: Steven, Land: Australien

Das Ziel ist es, dass ich Format bekommen folgen (ohne Komma und mit einer Bremse nach jedem Punkt und vielleicht eine horizontale durchgezogene Linie):

Name: Steven

Land: Australien

Ich habe versucht, eine ng-Wiederholung wie folgt aus:

<div ng-repeat="property in object.Properties">{{ property }}<br></div> 

Es funktioniert nicht. Jetzt habe ich versucht, das Komma in der Zeichenfolge zu finden und durch ein br-Tag zu ersetzen. Würde das funktionieren? Ich habe keine Ahnung, wie ich das machen soll und wenn es möglich ist, habe ich mich entschieden, hier zu fragen.

Dank

Answer 1

Das Problem, das Sie ist hat, dass Properties keine Hash-Tabelle ist, auch wenn die : Zeichen in den Saiten es so erscheinen lassen. Stattdessen ist es nur ein Array von Strings.

Versuchen Sie stattdessen:

angular 
 
    .module("demo", []) 
 
    .controller("demo", function($scope) { 
 
    $scope.object = { 
 
     "Properties": [ 
 
     "Name: Steven", 
 
     "Country: Australia" 
 
     ] 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
 

 
<div ng-app="demo" ng-controller="demo"> 
 
    <div ng-repeat="prop in object.Properties"> 
 
    {{ prop.split(": ")[0] }}: 
 
    {{ prop.split(": ")[1] }} 
 
    <hr> 
 
    </div> 
 
</div>

Diese noch einige Praktiken Verbesserungen nutzen könnten, z.B. Die split Ting ist etwas, was Sie lieber innerhalb des Codes tun würden, so dass es Einheit getestet werden könnte. Die Details würden bis zu Ihren spezifischen Kodierungskonventionen, aber hier ist eine andere Version mit ein paar schnelle Verbesserungen (wobei zumindest der gesamte Code aus der Sicht auf der Steuerungsseite gebracht wird):

angular 
 
    .module("demo", []) 
 
    .controller("demo", function($scope) { 
 
    var data = { 
 
     "Properties": [ 
 
     "Name: Steven", 
 
     "Country: Australia" 
 
     ] 
 
    }; 
 

 
    $scope.props = data["Properties"].map(function(p) { 
 
     var parts = p.split(": "); 
 
     if (parts.length !== 2) { 
 
     throw "Unexpected data " + p; 
 
     } 
 
     return { 
 
     key: parts[0], 
 
     value: parts[1] 
 
     }; 
 
    }); 
 
    });

th, td { padding: 5px; background: silver; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
 

 
<div ng-app="demo" ng-controller="demo"> 
 
    <table> 
 
    <tr> 
 
     <th>Key</th> 
 
     <th>Value</th> 
 
    </tr> 
 
    <tr ng-repeat="prop in props"> 
 
     <th>{{prop.key}}</th> 
 
     <td>{{prop.value}}</td> 
 
    </tr> 
 
    </table> 
 
</div>