CODEWITHSUNDEEP
htmlcssangularjs
sucasa
sucasa

Reputation: 371

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

Upvotes: 1

Views: 1082

Answers (3)

Hunter Turner
Hunter Turner

Reputation: 6894

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" >
    {{fieldset}}
  </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

Upvotes: 5

Teymur Mardali
Teymur Mardali

Reputation: 847

And also, use this line for active class

<li ng-class="$index==0 ? 'active' : ''" ></li>

or

<li ng-class="$first? 'active' : ''" ></li>

Upvotes: 1

Osman Cea
Osman Cea

Reputation: 1467

As Hunter said, the element you want to repeat is the <li>, not the <ul>, so you should place ng-repeat on the <li>.

Also, try using ng-class instead of declaring two different <li> with the class .active and another one without it. The class .active will be added only if the condition is met.

<ul id="progressbar">

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

</ul>

Upvotes: 1

Related Questions