Найти подстроки и заменить другой HTML/angularJS

Question

Привет У меня есть объект, как это:

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

Я получаю этот объект с этой строкой из нашего внутреннего интерфейса. Теперь я должен показать это в нашем всплывающем окне в html. Я делаю это так:

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

Он работает, я получаю строку в формате последующего в моем всплывающем окне: Имени: Стивен, Страна: Австралия

Цель состоит в том, что я получаю следовать формату (без запятой и с тормозом после каждого элемента и, возможно, горизонтальная сплошная линия):

Название: Стивен

Страна: Австралия

Я попробовал нг-повторить, как это:

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

Это не работает. Теперь я попытался найти запятую в строке и заменить ее на br-tag. Будет ли это работать? Я понятия не имею, как это сделать, и если это возможно, поэтому я решил спросить здесь.

Благодаря

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 ting - это то, что вы предпочли бы сделать внутри кода, чтобы его можно было протестировать. Детали бы до конкретных конвенций кодирования, но вот еще одна версия с некоторыми быстрых улучшений (где по крайней мере весь код привезенных с точки зрения на стороне контроллера):

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>