I need to start working in a directive.
I have 5 different views where the html is exactly the same, so I need to do the directive in order to minimize my HTML.
<div class="list betslip-item">
<div class="item betslip-header"
ng-class="slip.active == '1' ? 'betslip-header-active' : 'betslip-header-inactive'">
<div class="row">
<div class="col slip-name" ng-click="openMoreInfoSlip(slip)">
{{:: slip.teamName}}
</div>
<div class="col-30">
<a class="button-size select-button"
ng-click="swapLineSelection(slip)">
<i class="fa" ng-class="slip.active == '1' ? 'fa-check-circle' : 'fa-plus-circle'"></i>
</a>
<a class="button-size close-button"
ng-click="removeSlip(slip)"><i class="fa fa-times"></i>
</a>
</div>
</div>
</div>
<div class="item item-input" ng-class="(slip.lines.length > 1) ? 'item-select' : ''">
<div class="input-label">
{{:: slip.nss}} - {{::slip.gameDate}}
</div>
<span class="pick-label"
ng-init="currentLine = getCurrentLine(slip)"
ng-if="slip.lines.length < 2">{{:: currentLine.pick}}</span>
<select
ng-if="slip.lines.length > 1"
ng-init="currentLine = getCurrentLine(slip)"
ng-model="currentLine"
ng-options="line as line.pick for line in slip.lines"
ng-change="updateSelectionLine(slip, currentLine.pointsBought)">
</select>
</div>
</div>
That is the HTML I am talking about, I should include css classes and everything, is that possible?
Any help is very welcome.