Как изменить ширину первого столбца загрузочной сетки внутри ng-repeat

Question

Как удвоить ширину первого столбца (от col-xx-4 до col-xx-8) с помощью AngularJS?

Это очень легко с самим Bootstrap (вы увидите его в прикрепленном плункерном разделе B).

Я стараюсь сделать то же самое в разделе A - с AngularJS.

Когда я использую $ первый селектор с

ng-class='{"post col-xs-8":$first}'

все столбцы, кроме первого в порядке. К сожалению, первый столбец получает класс col-xx-4, а не col-xx-12, и занимает только 1/4 свободного пространства, а не полную ширину.

Как его выбрать и изменить, чтобы это выглядело в разделе B? http://plnkr.co/edit/PvkjyDg19oM3bQaqJWIK?p=preview

Answer 1

Это то, что вам нужно:

<div ng-repeat="a in data" ng-class='{"post col-xs-8":$first, "col-xs-4":!$first}'> 
    <p class="color">{{a}}</p> 
</div> 

Родитель дивы всех детей дивы были пропущены, чтобы установить ширину, за исключением первого столбца.