如何编写角度代码而不是 jquery？

Question

我写了一些代码来用 jquery 切换下拉菜单。所以我正在尝试用 angularJs 编写代码。我对 angularjs 了解不多。

HTML 模板

<div id="add" class="modal category modal-fixed-footer">
        <div class="modal-content">
            <h4>Categories</h4>

            <div class="wrapper">
                <ul class="collection main first-level">


                    <!-- FIRST LEVEL ITEM (WOMEN) -->
                    <li class="collection-item">

                        <span class="item-wrapper">
                            <span>Women<i class="material-icons">arrow_drop_down</i></span>
                        </span>

                        <p class="checkbox">
                        <input type="checkbox" class="filled-in" id="1"/>
                            <label for="1"></label>
                        </p>


                        <ul class="collection second-level">

                            <!-- SECOND LEVEL ITEM -->
                            <li class="collection-item ">

                                <span class="item-wrapper">
                                    <span>Women's Clothing<i class="material-icons">arrow_drop_down</i></span>
                                </span>

                                <p class="checkbox">
                                    <input type="checkbox" class="filled-in" id="2"  />
                                    <label for="2"></label>
                                </p>

                                <ul class="collection third-level">

                                    <!-- SECOND LEVEL ITEM -->
                                    <li class="collection-item"><span class="item-wrapper">Blazers </span><p class="checkbox"><input type="checkbox" class="filled-in" id="3" /><label for="3"></label></p></li>

                                    <li class="collection-item"><span class="item-wrapper">Jeans </span><p class="checkbox"><input type="checkbox" class="filled-in" id="6" /><label for="6"></label></p></li>

                                </ul>
                            </li>


                        </ul>
                    </li>


                </ul>


            </div>


        </div>

        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect  btn-flat ">Save</a>
            <a href="#!" class="modal-action modal-close waves-effect  btn-flat ">Cancel</a>
        </div> 
    </div>

jQuery 代码

$( ".collection-item > span" ).click(function() {
                $(this).next(".collection").slideToggle( "medium" );
                $(this).next().next(".collection").slideToggle( "medium" );

                var icon = $(this).find('i').text();
                if (icon == "arrow_drop_up") {
                    $(this).find('i').text("arrow_drop_down");
                } else {
                    $(this).find('i').text("arrow_drop_up");
                }                   
            });

我们如何在 angularJs 而不是 Jquery 中编写相同的功能代码。请做必要的事情。

Answer 1

每当有任何与dom相关的操作时，最好的选择是创建一个指令（而且它是可重用的）。喜欢这里toggle-me

<div id="add" class="modal category modal-fixed-footer">
    <div class="modal-content">
        <h4>Categories</h4>
        <div class="wrapper">
            <ul class="collection main first-level">
                <!-- FIRST LEVEL ITEM (WOMEN) -->
                <li class="collection-item">
                    <span class="item-wrapper" toggle-me>
                            <span>Women<i class="material-icons">arrow_drop_down</i></span>
                    </span>
                    <p class="checkbox">
                        <input type="checkbox" class="filled-in" id="1" />
                        <label for="1"></label>
                    </p>
                    <ul class="collection second-level">
                        <!-- SECOND LEVEL ITEM -->
                        <li class="collection-item ">
                            <span class="item-wrapper" toggle-me>
                                    <span>Women's Clothing<i class="material-icons">arrow_drop_down</i></span>
                            </span>
                            <p class="checkbox">
                                <input type="checkbox" class="filled-in" id="2" />
                                <label for="2"></label>
                            </p>
                            <ul class="collection third-level">
                                <!-- SECOND LEVEL ITEM -->
                                <li class="collection-item"><span class="item-wrapper">Blazers </span>
                                    <p class="checkbox">
                                        <input type="checkbox" class="filled-in" id="3" />
                                        <label for="3"></label>
                                    </p>
                                </li>
                                <li class="collection-item"><span class="item-wrapper">Jeans </span>
                                    <p class="checkbox">
                                        <input type="checkbox" class="filled-in" id="6" />
                                        <label for="6"></label>
                                    </p>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect  btn-flat ">Save</a>
        <a href="#!" class="modal-action modal-close waves-effect  btn-flat ">Cancel</a>
    </div>
</div>

角度代码

angular.module('App', [])
    .directive('toggleMe', function() {
        return {
            restrict: 'E',
            link: function(scope, ele, attr) {
                ele.on('click', function() {
                    ele.next('.collection').slideToggle('medium');
                    ele.next().next('.collection').slideToggle('medium');

                    var icon = ele.find('i').text();
                    if (icon === 'arrow_drop_up') {
                        ele.find('i').text('arrow_drop_down');
                    } else {
                        ele.find('i').text('arrow_drop_up');
                    }
                });
            }
        };
    });

在指令中，您可以根据需要添加逻辑。