user1550052 user1550052 - 3 months ago 12
AngularJS Question

css counter-increment in angularjs ng-repeat

This is an ordered list I'd like to recreate in angularjs,
Ignore the fact the steps start at 0, these will be changed to other content later.

proper

Its source is here and the numbers are generated by css counter-increment

Html:

<ul id="progressbar">
<li class="active">Step 0</li>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>


CSS:



/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

html {
height: 100%;
/*Image only BG fallback*/
background: url('gs.png');
/*background = gradient + image pattern combo*/
background:
linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)),
url('gs.png');
}

body {
font-family: montserrat, arial, verdana;
background-color: transparent !important;
}
/*form styles*/
#msform {
width: 480px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;

box-sizing: border-box;
width: 80%;
margin: 0 10%;

/*stacking fieldsets above each other*/
position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
/* width should be 100 divided by the number of steps */
width: 14.2857%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}

.rbContainer{
white-space:nowrap;
text-align: center;
}
.rbContainerN{
white-space:nowrap;
text-align: center;
margin-left: -50px;
}

.rbContainerL{
white-space:nowrap;
float: left;
}
.rbContainerR{
white-space:nowrap;
float: right;
}
.lblY { float:left; }
.inY { float:left; }

<html>

<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script>
angular.module("swiz", []).controller("bCtrl", function($scope) {
$scope.fieldsets = [
"Q 1",
"Q 2",
"Q 3",
"Q 4"
];
});
</script>
</head>

<body ng-app='swiz' ng-controller="bCtrl">
<ul id="progressbar">

<div ng-repeat="fieldset in fieldsets">

<li class="active" ng-if="$first">{{fieldset}}</li>

<li ng-if="!$first">{{fieldset}}</li>
</div>
</ul>
</body>

</html>





Update: so yes the ng-repeat was on the ul tag. but it also needs to be on a div inside the ul (i'm a bit rusty)

the connections are still not showing up

Answer

You need to place the ng-repeat on the <li> not the <ul>. The styling is messed up because it's creating a new <ul> each time.

<ul id="progressbar">

  <li class="active" ng-repeat="fieldset in fieldsets" >
    step {{$index}}
  </li>

</ul>

Update

You can still put the ng-repeat inside of the <li>. Just use ng-class to change out the class instead of ng-if.

<ul id="progressbar">
    <li ng-class="{active: $first}" ng-repeat="fieldset in fieldsets">
      {{fieldset}}
    </li>
</ul>

JSFiddle