Angular JS - один контент-пусковой переключатель из списка

Question

Я пытаюсь преобразовать мои основные html / jquery-кодировки в угловые.Я новичок в angular, поэтому любой указатель на то, как правильно это сделать, будет полезен.

Итак, у меня есть список.Каждый список содержит основной контент и суб-контент, который изначально скрыт.Мне нужно иметь возможность переключать скрытие / показ определенного субконтента для каждого списка.

Вот мой основной html / jquery код:

<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>

А вот мой текущий угловой код:

<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>

Answer 1

Вам нужно установить открытый тег для каждого объекта в вашем массиве содержимого.

$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
    }
];

Теперь в вашем ng-repeat вы можете сделать что-то похожее: $ index вернуть индекссодержимого в массиве содержимого ng-класс позволяет динамически добавлять класс к вашему элементу

<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>

После этого вам нужно внести небольшие изменения в функцию toggleSubContent ()

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

Вот Плюкер