I have multiple elements that display an icon with a its' respective label. Upon click of any of the icons, I would like to display the next step. I can simply attach the ng-click event handler to EACH of the DOM elements for the function to trigger. I'd like to find a 'cleaner' way where I can have one "ng-click" that would apply to each of the elements( 8 in total). I'm a newbie to angularJS and have not been able to find an alternative to do so. Thanks!
<ul class="list-inline row">
<li class="col-sm-3">
<div class="col-sm-6" ng-click="displayStep2"><span class="glyphicon glyphicon-cutlery"></span>
<p>Cutlery & Service</p>
</div>
<div class="col-sm-6"><span class="glyphicon glyphicon-off"></span>
<p>AV Equipment</p>
</div>
</li>
<li class="col-sm-3">
<div class="col-sm-6"><span class="glyphicon glyphicon-wrench"></span>
<p>Furniture & Fixtures</p>
</div>
<div class="col-sm-6"><span class="glyphicon glyphicon-pencil"></span>
<p>Supplies</p>
</div>
</li>
<li class="col-sm-3">
<div class="col-sm-6"><span class="glyphicon glyphicon-road"></span>
<p>Transportation</p>
</div>
<div class="col-sm-6"><span class="glyphicon glyphicon-stats"></span>
<p>Set Up & Clean Up</p>
</div>
</li>
<li class="col-sm-3">
<div class="col-sm-6"><span class="glyphicon glyphicon-envelope"></span>
<p>Shipment Tracking</p>
</div>
<div class="col-sm-6"><span class="glyphicon glyphicon-sort"></span>
<p>Temperature</p>
</div>
</li>
</ul>
<script>
$scope.displayStep2 = function(){
window.location.href = "/requestPortal/meeting/2/request/create";
};
</scirpt>
ng-repeat
to template it out. – tymeJV Oct 16 '14 at 15:20ng-class
based on a property value – tymeJV Oct 16 '14 at 15:35