サブストリング検索し、別のと交換HTML/angularJS

Question

こんにちは私はこのようなオブジェクトを持っています。今私はhtmlのポップアップでそれを表示しなければなりません。私は、ポップアップでフォロー形式の文字列を取得し、

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

それは動作します：名：スティーブン、国：オーストラリア

目標は、私がフォローフォーマットを取得すること、である（私はこのようにそれを行いますコンマなしで、すべての項目と、おそらく水平実線後ブレーキ付）：

名：スティーブン・

国：オーストラリア

は、私はこのようなNGリピートを試してみました：

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

それは動作しません。今度は、文字列のコンマを見つけて、それをbrタグに置き換えようとしました。これは効果がありますか？私はこれをどうやって行うのか考えていないし、可能であればここで尋ねることにした。

おかげ

Answer 1

あなたが持っている問題は、Propertiesは、文字列内の:文字が、それはそう見えるようにもかかわらず、ハッシュテーブルではないということです。代わりに、それは文字列の配列です。

代わりにこれを試してみてください：

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>

これはまだ、例えば、いくつかの慣行の改善を使用することができますsplitはコードの中で何かを実行したいので、単体テストが可能です。詳細は、特定のコーディング規則までとすることが、ここでは（少なくとも、すべてのコードは、コントローラ側に視界からもたらされる）いくつかの簡単な改良を加えた別のバージョンだします：

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>