Comma Separated <p> angular

У меня довольно простой сценарий (несколько новый для angular). Я пытаюсь преобразовать JSON:

[
    {'name': 'Nick'},
    {'name': 'David'},
    {'name': 'John'},
]

To:

<p>Nick,David,John</p>

Но я не могу понять, как создать одиночный "p". Как вы называете ng-repeat внутри <p>

<p ng-repeat="item in menuItems">{{item.name}}</p>

Ответ 1

Одна вещь, которая была бы полезной, - создать фильтр "map", например:

myModule.filter('map', function() {
  return function(input, propName) {
    return input.map(function(item) {
      return item[propName];
    });
  };
});

Чтобы простой случай сопоставления с именованным свойством, вы могли бы сделать его более фантастическим и понимать точечную нотацию и т.д. Теперь с вашей точки зрения вы можете сделать:

<p>
  {{(menuItems | map:'name').join(',')}}
</p>

Так как фильтр карты возвращает массив, у которого есть встроенный метод соединения уже в Javascript.

Ответ 2

Вы не можете этого сделать. Вместо этого используйте map и join. Например:

<p>{{names}}</p>

$scope.menuItems = [
  {'name': 'Nick'},
  {'name': 'David'},
  {'name': 'John'},
];
$scope.$watch('menuItems', function(menuItems) { 
    $scope.names = menuItems.map(function(item) { return item.name }).join(',');
});

Это будет $watch menuItems и обновит свойство names объекта $scope, когда изменяется menuItems.

Ответ 3

Я не уверен, что это возможно... Как использовать ng-repeat без элемента html

Но вы всегда можете:

<p>
    <span ng-repeat="item in menuItems">{{item.name}},</span>
</p>

Ответ 4

Вот еще один подход, который более удобно использовать с помощью фильтров:

app.filter('commaSeparated', function () {
    return function(input, property) {
        var csv = '';
        for (var i = 0; i < input.length; i++) {
            csv += input[i][property];
            if (i < input.length - 1) {
                csv += ',';
            }
        }
        return csv;
    };
});

Очевидно, вы можете заменить литерал массив вашими объектами $scope.menuItems...

<p>
    {{ [ {'name': 'Nick'}, {'name': 'David'}, {'name': 'John'} ] | commaSeparated:'name' }}
</p>

Ответ 5

Мне нравится идея фильтра карт. Это здорово. Для меньшего кода попробуйте этот ответ. Пропустите свойство name и ng-repeat и используйте функцию join():

<p>{{people.join(', ')}}</p>

К сожалению, это не работает:

<p>{{people.map(function(item){return item.name;}).join(', ')}}</p>

Ответ 6

Если вы используете <span> вместо <p>, а затем следующий массив объектов,

[
      { "name": "John" },
      { "name": "David" },
      { "name": "Gopal" },
      { "name": "Anil" },
      { "name": "Gurjeet" }
]

может отображаться как: John, David, Gopal, Anil и Gurjeet

с этим фрагментом кода:

<span ng-repeat="admin in data">{{$first ? '' : $last ? ' and ' : ', '}}{{admin.name}}</span>

Получено это решение из: AngularJS ng-repeat, запятая, разделенная "и" до последнего элемента

Спасибо!

Ответ 7

Вы также можете выполнить это следующим образом:

<p>    
   <span ng-repeat="(item,name) in menuItems">{{name}}{{$last ? '' : ', '}} </span>
</p>

Я использовал этот подход по аналогичной проблеме, которую я имел, я стараюсь никогда не смешивать javascript/jquery и angular. Получил решение отсюда: Использование запятой в качестве разделителя списков с помощью AngularJS