Angular.JS ng-repeat разбить строку

Question

Я новичок в Angular.JS и попытаюсь выяснить, как правильно реализовать ng-repeat.

У меня есть объект данных в моей области действия, который был сформирован из JSON из моей базы данных. Одно из возвращенных полей может иногда быть либо одной строкой, либо массивом.

Пример:

Email Address = "me@test.com" or 
Email Address = ["me1@test.com", "me2@test.com", "me3@test.com"] 

Я просто хотел бы, чтобы отобразить в серии пролетов любой адрес электронной почты будет содержать. До сих пор я сделал это:

<span ng-repeat="EMAIL_ADDRESS in data.EMAIL_ADDRESS"> 
    <span>{{EMAIL_ADDRESS}}</span><br /> 
</span 

для адреса электронной почты, что это массив из 3, я получаю это (я хочу):

<span>me1@test.com</span><br /> 
    <span>me2@test.com</span><br /> 
    <span>me3@test.com</span><br /> 

для адреса электронной почты, что просто строка Я получаю:

<span>m</span><br /> 
    <span>e</span><br /> 
    <span>@</span><br /> 
    <span>t</span><br /> 
    <span>e</span><br /> 
    <span>s</span><br /> 
    <span>t</span><br /> 
    <span>.</span><br /> 
    <span>c</span><br /> 
    <span>o</span><br /> 
    <span>m</span><br /> 

Как я могу предотвратить более позднюю ситуацию? Я знаю, что это больше Javascript-поведения, но я не уверен, как его поместить в Angular.

Answer 1

, если вы не можете изменить возвращаемый объект из базы данных, или если вы делаете это сделать на несколько переменных, вы можете реализовать функцию для преобразования строки в массив, что предотвратит анализ вашего ng-repeat

Одна из возможных функций может быть реализована непосредственно в контроллер:

$scope.formatData=function(objectFromDB){ 
    if(!angular.isArray(objectFromDB)) 
     return [objectFromDB]; 
    else 
     return objectFromDB; 
    } 

Тогда вы просто должны вызвать функцию с данными

<span ng-repeat="EMAIL_ADDRESS in formatData(data.EMAIL_ADDRESS)"> 

Answer 2

Угловой способ заключается в форматировании ваших данных после его получения. Если значение является строкой, замените его массивом, содержащим это значение. Таким образом, ваш шаблон получит согласованный результат, и ваша логика контроллера будет обрабатывать согласованные структуры данных.

Редактировать: Я бы также не привязал необработанные данные возврата с сервера в область $ scope напрямую. Мне нравится добавлять уровень разделения между именами/типами данных сервера и клиента, чтобы обеспечить будущую легкость изменения и отсутствие сильной связи.

JS:

$http.get('/my/data').success(function(data) { 
    //here's where I'd do all the data transformation and binding 
    if(angular.isArray(data.EMAIL_ADDRESS)) { 
    $scope.emailAddresses = data.EMAIL_ADDRESS; 
    else { 
    $scope.emailAddresses = [data.EMAIL_ADDRESS]; 
    } 
}); 

HTML:

<span ng-repeat="emailAddress in emailAddresses"> 

Таким образом, ваши шаблоны не связаны с возвращением сервера апи значения/свойства

Answer 3

Вы можете иметь отдельные пролеты/docs, чтобы показать разные случаи: с ngRepeat для массивов и без него для простой строки ,

Так вроде

<div ng-show="isString(data.EMAIL_ADDRESS)">{{data.EMAIL_ADDRESS}}<div><div ng-hide="isString(data.EMAIL_ADDRESS)" ng-repeat="address in data.EMAIL_ADDRESS">{{address}}<div> 

Answer 4

Когда вы запрашиваете данные с сервера:

EMAIL_ADDRESS = EMAIL_ADDRESS instanceof Array ? EMAIL_ADDRESS : [EMAIL_ADDRESS]