Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.

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 &#38; 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 &#38; 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 &#38; 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>
share|improve this question
1  
The "Angular" way of doing this would be storing this data in an array and then using ng-repeat to template it out. – tymeJV Oct 16 '14 at 15:20
    
is it feasible even if each label has a different icon associated with it? I am using the gylphicons from twitter bootstrap? – Anish S. Oct 16 '14 at 15:33
    
Of course - you can use ng-class based on a property value – tymeJV Oct 16 '14 at 15:35
    
(lightbulb flickered) +1 – Anish S. Oct 16 '14 at 15:36
    
after I loop thru the items in my array...I would still need to list out the 8 different glyphicons correct? then assign the property name to each one? – Anish S. Oct 16 '14 at 15:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.