Show the background color on each list element that is being created from the ng-repeat directive

Question

Show the background color on each list element that is being created from the ng-repeat directive

This code dynamically displays a list of li's with images and text.

<ul class="presale">
                    <li ng-repeat="(k,v) in value | groupBy : 'presales_name'" ng-click="showData(k.split(' ').join('-').replace('(','').replace(')',''), $index)">
                        <div class="imgDiv">
                            <img src="/images/phones/sub-family/xs/{{k.split(' ').join('-').replace('(','').replace(')','-').toLowerCase()}}.png">
                        </div>
                        <p><a>{{k}}</a></p>
                    </li>
</ul>


$scope.showData = function (item, index) {              

}

I am looking to enhance this code by adding functionality that allows the user to select a li item, which will change its background-color, while also removing the background-color from any previously selected li items.

jquery html css angularjs

Answer 1

Answer №1

If you want to implement something similar, you can follow this approach:

JavaScript File

var app = angular.module('app', []);

app.controller('NavigationController', function ($scope) 
{
    // Using a wrapper object is necessary for "activeItem" to work correctly
    $scope.states = {};
    $scope.states.activeItem = 'item1';
    $scope.items = [{
        id: 'item1',
        title: 'Home'
    }, {
        id: 'item2',
        title: 'Public Rooms'
    }, {
        id: 'item3',
        title: 'My Rooms'
    }];
});

HTML File

<body ng-app="app">
    <div ng:controller="NavigationController">
        <p>
            Your active menu item: <span class="highlightOne">{{states.activeItem}}</span>
        </p>
        <ul class="navigation">
            <li ng-repeat="item in items" class="item" ng-class="{'active': item.id == states.activeItem}" ng-click="states.activeItem=item.id">{{item.title}}</li>
        </ul>
    </div>
</body>

CSS File

ul.navigation li
{
    background: #f6f6f6;
    padding: 10px;
    margin: 2px 0;
    display: block;
    cursor: pointer;
}

    ul.navigation li.active
    {
        background: blue;
        color: #f6f6f6;
        display: block;
        padding: 10px;
    }

.highlightOne
{
    background: orange;
    font-size: 125%;
    margin: 5px;
    padding: 5px;
}

.navigation
{
    display: block;
    background: #666;
    margin: 10px;
    padding: 10px;
    width: 40%;
}

p
{
    margin: 10px 0 20px;
}

To see the code implementation in action, refer to "https://codepen.io/SkiWether/pen/lzjAq".

Answer 2

If you want to implement something similar, you can follow this approach:

JavaScript File

var app = angular.module('app', []);

app.controller('NavigationController', function ($scope) 
{
    // Using a wrapper object is necessary for "activeItem" to work correctly
    $scope.states = {};
    $scope.states.activeItem = 'item1';
    $scope.items = [{
        id: 'item1',
        title: 'Home'
    }, {
        id: 'item2',
        title: 'Public Rooms'
    }, {
        id: 'item3',
        title: 'My Rooms'
    }];
});

HTML File

<body ng-app="app">
    <div ng:controller="NavigationController">
        <p>
            Your active menu item: <span class="highlightOne">{{states.activeItem}}</span>
        </p>
        <ul class="navigation">
            <li ng-repeat="item in items" class="item" ng-class="{'active': item.id == states.activeItem}" ng-click="states.activeItem=item.id">{{item.title}}</li>
        </ul>
    </div>
</body>

CSS File

ul.navigation li
{
    background: #f6f6f6;
    padding: 10px;
    margin: 2px 0;
    display: block;
    cursor: pointer;
}

    ul.navigation li.active
    {
        background: blue;
        color: #f6f6f6;
        display: block;
        padding: 10px;
    }

.highlightOne
{
    background: orange;
    font-size: 125%;
    margin: 5px;
    padding: 5px;
}

.navigation
{
    display: block;
    background: #666;
    margin: 10px;
    padding: 10px;
    width: 40%;
}

p
{
    margin: 10px 0 20px;
}

To see the code implementation in action, refer to "https://codepen.io/SkiWether/pen/lzjAq".

Show the background color on each list element that is being created from the ng-repeat directive

Answer №1

Similar questions

Refreshing a single div with a variety of potential hyperlinks

Unable to set width for td element in media query is not functioning as expected

Is there a way to load a CI controller function in view without having to refresh the page

How do you populate a dropdownlistfor in ASP.NET MVC after a form

Tap the mobile menu button twice to toggle the menu

What could be causing the compatibility issue between fr units and grid-template-rows in CSS grid?

Utilize jQuery to perform polling on a web service

Height CSS does not conceal side bar hyperlinks

What is the best way to retrieve the items stored within the array generated by a JavaScript function?

JavaScript: displaying the value of a checked checkbox

Utilizing the value selected in a form to trigger an action method without the use of a query

Uploading images dynamically using Ajax and PHP upon submission

Click event dynamically bound to list items

Using jQuery to change date format from mm/dd/yy to yyyy-dd-mm

User is automatically logged in upon account completion

Enable/Disable Button Link Tag

The HTML code for the base64 image conversion failed to load

When applying a maximum width of 100% with automatic height, images may become cropped

D3 group of legendary elements

Using Flask and jQuery, learn how to toggle the visibility of a reply text box