Question

我是angularjs的初学者，所以我下载了一个菜单，我不知道如何使它与angularjs一起工作。当我点击项目时，我如何显示他们的子链接？

itemController.js

＆＃13;

app
    .controller('itemList', function($scope, itemProvider){


     $scope.items = [];
     $scope.sublinks = null;

      

     itemProvider.getItems().success(function(data){
     $scope.items  = data;
     alert("ll"+$scope.items[0].sublinks[0].title);
   });

    $scope.showSublinks = function(item){

        $scope.sublinks = item.sublinks;    
    }

    });

＆＃13;

以下代码正常运行

menu.html

<div id="menu">
            <nav>
                <h2><i class="fa fa-reorder"></i>All Categories</h2>
                <ul>
                    <li >
                        <a ><i class="fa fa-laptop"></i>{{items[0].title}}</a>
                        <h2><i class="fa fa-laptop"></i>{{items[0].title}}</h2>
                        <ul>
                            <li >
                                <a><i class="fa fa-phone"></i>{{items[0].sublinks[0].title}}</a>
                                <h2><i class="fa fa-phone"></i>{{items[0].sublinks[0].title}}</h2>

                            </li>
                        </ul>
                    </li>
                    <li >
                        <a ><i class="fa fa-laptop"></i>{{items[1].title}}</a>
                        <h2><i class="fa fa-laptop"></i>{{items[1].title}}</h2>
                        <ul>
                            <li >
                                <a><i class="fa fa-phone"></i>{{items[1].sublinks[0].title}}</a>
                                <h2><i class="fa fa-phone"></i>{{items[1].sublinks[0].title}}</h2>

                            </li>
                        </ul>
                    </li>
                </ul>

            </nav>
        </div-->

但问题是当我添加指令ng-repeat

时

 <div id="menu">
            <nav>
                <h2><i class="fa fa-reorder"></i>All Categories</h2>
                <ul>

                      <li class="main btn" ng-repeat="item in items">



                        <a  ng-click="showSubMenu(item)" ng-model="master"> <!--i class="fa fa-laptop" ></i--> 

                       {{item.title}} 
                       <img class="item_icon" src="{{item.icon}}"></a>
                        <h2><i class="fa "></i> {{item.title}} </h2>

                                <ul>
                                    <li class="sub " ng-repeat="sublink in sublinks">
                                    <a class="btn alignhref">{{sublink.title}}</a>

                                    </li>
                                </ul>

                       </li>

                        </ul>
            </nav>
        </div>

routing.js

＆＃13;

app
    .config(['$routeProvider',
        function($routeProvider) {
            $routeProvider
                .when('/items', {
                    templateUrl:'js/app/views/item/menu.html',
                    controller:'itemList'
                });
    }]
)

＆＃13;

Answer 1

我也是使用angularjs的初学者。

谢谢这个 http://jsfiddle.net/f8ea6/293/

HTML：

/**
 * summary
 */

JS

<div id="menu" ng-app="rgMenu" ng-controller="itemList">
<nav>
    <h2>All Categories</h2>
    <ul class="nav navbar-nav">
        <li ng-repeat="item in items">
            <a ng-click="showSubMenu(item)">
                <h2>{{item.title}}</h2>
            </a>
            <ul ng-if="item.sublinks">
                <li ng-repeat="sublink in sublinks">
                    <a>{{sublink.title}}</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

也许可以帮到你。

如何通过单击项目angularjs显示子链接

1 个答案: