CODEWITHSUNDEEP
angularjs
Christopher
Christopher

Reputation: 590

Angular JS - single content toggler from list

I'm trying to convert my basic html/jquery codings to angular. I'm new to angular so any pointer on how to properly do this would be helpful.

So, I have a list. Each list contains a main content and a sub-content which is initially hidden. I need to be able to toggle hide/show the specific sub-content for each list.

Here's my basic html/jquery code:

<style>
.toggler
{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size:16px;
    text-align: center;
    transition: all 200ms ease-in-out;
}
.toggler.opened
{
    transform: rotate(180deg);
    font-size:22px;
}
.sub-content
{
    display: none;
}
</style>
<!-- this list comes from php loop -->
<li>
    <div class="row">
        <div class="col-10">
            MAIN CONTENT HERE
        </div>
        <div class="col-2">
            <a class="toggler" href="javascript:void(0);"><i class="fa fa-chevron-down"></i></a>
        </div>
    </div>
    <div class="row sub-content">
        <div class="col-12">
            SUB CONTENT HERE
        </div>
    </div>
</li>
<li>
    <div class="row">
        <div class="col-10">
            MAIN CONTENT HERE
        </div>
        <div class="col-2">
            <a class="toggler" href="javascript:void(0);"><i class="fa fa-chevron-down"></i></a>
        </div>
    </div>
    <div class="row sub-content">
        <div class="col-12">
            SUB CONTENT HERE
        </div>
    </div>
</li>


<script>
    $(".toggler").click(function()
    {
        $(this).toggleClass("opened");
        $(this).closest("li").find(".sub-content").toggle(200);
    });
</script>

And here's my current angular coded:

<style>
.toggler
{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size:16px;
    text-align: center;
    transition: all 200ms ease-in-out;
}
.toggler.opened
{
    transform: rotate(180deg);
    font-size:22px;
}
</style>

<ul>
    <li data-ng-repeat="content in contents">
        <div class="row">
            <div class="col-10">
                {{content.main}}
            </div>
            <div class="col-2">
                <a data-ng-click="toggleSubContent();" class="toggler {{opened}}"><i class="fa fa-chevron-down"></i></a>
            </div>
        </div>
        <div class="row sub-content" data-ng-hide="hideSubCont">
            <div class="col-12">
                {{content.sub}}
            </div>
        </div>
    </li>
</ul>

<script>
var app = angular.module('anguApp', []);

app.controller('anguCtrl',function($scope,$http){
    $scope.hideSubCont  = true;
    $scope.opened       = "";

    $scope.contents = [
        {
            main:"MAIN CONTENT HERE",
            sub:"SUB CONTENT HERE"
        },
        {
            main:"MAIN CONTENT HERE",
            sub:"SUB CONTENT HERE"
        },
        {
            main:"MAIN CONTENT HERE",
            sub:"SUB CONTENT HERE"
        }
    ];

    $scope.toggleSubContent = function()
    {
        $scope.opened       = $scope.opened == "opened" ? "" : "opened";
        $scope.hideSubCont  = $scope.hideSubCont ? false : true;
    };
});
</script>

Upvotes: 1

Views: 26

Answers (1)

Luca Vimercati
Luca Vimercati

Reputation: 51

You need to set the opened tag on every object in your contents array.

$scope.contents = [
    {
        main:"MAIN CONTENT HERE",
        sub:"SUB CONTENT HERE",
        open: false
    },
    {
        main:"MAIN CONTENT HERE",
        sub:"SUB CONTENT HERE",
        open: false
    },
    {
        main:"MAIN CONTENT HERE",
        sub:"SUB CONTENT HERE",
        open: false
    }
];

Now in your ng-repeat you can do something similar: $index return the index of content in contents array ng-class permit to add class dinamically to your element

<ul>
    <li data-ng-repeat="content in contents">
        <div class="row">
            <div class="col-10">
                {{content.main}}
            </div>
            <div class="col-2">
                <a data-ng-click="toggleSubContent($index);" class="toggler" ng-class="{'opened': content.open}"><i class="fa fa-chevron-down"></i></a>
            </div>
        </div>
        <div class="row sub-content" data-ng-hide="!content.open">
            <div class="col-12">
                {{content.sub}}
            </div>
        </div>
    </li>
</ul>

After that you need to do a little change to your toggleSubContent() function

$scope.toggleSubContent = function(indexContent)
{
    $scope.contents[indexContent].open = !$scope.contents[indexContent].open;
};

Here Pluker

Upvotes: 2

Related Questions