Блог

Главная - Вопросы по программированию - Повторять, если массив, отображать, если строка

Повторять, если массив, отображать, если строка

#angularjs

#angularjs

Вопрос:

Я ссылаюсь на значение в моем контроллере, которое может быть строкой или массивом. Если это массив, я хочу использовать «ng-repeat» (вероятно), чтобы перечислить мои элементы.

Если это строка, я просто хочу отобразить строку.

Что — то вроде:

 <div>
    {{if is array}}
        <span ng-repeat="v in myvalue">{{v}}</span>
    {{else}}
        {{myvalue}}
    {{endif}}
</div>

Мне интересно, есть ли элегантный способ сделать это в Angularjs, с которым я просто еще не знаком.

Спасибо

Ответ №1:

Существует метод angular.isArray . Вы можете использовать это. Вам нужно поместить его в область видимости или виртуальную машину:

 $scope.isArray = angular.isArray

И в HTML

  <span ng-repeat="v in myvalue" ng-if="isArray(myvalue)">{{v}}</span>
 <span ng-if="!isArray(myvalue)">{{myvalue}}</span>

Если вы используете его более чем в одном месте, лучше всего использовать директиву.

Комментарии:

1. что с if интерполяцией? Как это создает ожидаемый результат?

2. @charlietfl Angular может интерполировать условные выражения.

3. @jusopi отлично, но таким образом не даст ожидаемых результатов … теперь это происходит после редактирования

4. согласен, к тому же он изменил свой ответ, так что теперь это спорный вопрос

5. Все отличные ответы ИМО, но это было лучшее решение для меня

Ответ №2:

Выполните логику на контроллере (присвоите другой переменной для массива и строки) — затем просто выполните тупую логику в представлении:

 if (Array.isArray($scope.myvalue)) {
    $scope.myArray = $scope.myvalue;
} else {
    $scope.myString = $scope.myvalue;
}

И представление

 <div>
    <div ng-if="myArray">
        <span ng-repeat="v in myArray">{{v}}</span>
    </div>
    <div ng-if="myString">
        {{myString}}
    </div>
</div>

Ответ №3:

сделайте простой геттер

 $scope.getVal = function( vals ){
    if(Array.isArray(vals)) return vals
    else return [ vals ]
}

тогда вместо ng-if И ng-repeat просто используйте повторитель, как обычно.

 <div ng-repeat="val in getVal(vals)"> {{ val }} </div>

Комментарии:

1. В моей конкретной ситуации есть нюанс, когда это не сработает, но я вижу, как это будет в других. Голос вверх

2. Можете ли вы объяснить специфику?

3. На самом деле я оборачиваю элементы массива в другой элемент, который не будет присутствовать со строковым значением, поскольку существует дополнительное взаимодействие пользователя с элементами, созданными массивом.

4. Аааа, хорошо, я понял. В этом случае я бы обработал это фильтром и использовал ng-if . Мне действительно не нравится добавлять такую логику в контроллеры.

Метки: