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

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

itemController.js

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

 
    });

下面的代码工作正常

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

个

<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

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

来源

2015-05-08 Fadwa

最简单的解决方案是以css'：hover'规则开始。如果你想让更多的人知道更多的话，就会回头看看 – charlietfl

我是初学者在使用angularjs太多。

赤此 http://jsfiddle.net/f8ea6/293/

HTML：

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

var app = angular.module("rgMenu",[]); app.controller('itemList', function($scope){ $scope.items = [ {"title":"Google", "description":"Google Search Engine"}, {"title":"Yahoo", "description":"Yahoo Search Engine", 
    "sublinks":[ 
     {"title":"Yahoo", "href":"http://yahoo.com/", "target":"_blank" }, 
     {"title":"Sports", "href":"http://sports.yahoo.com/", "target":"_blank" }, 
     {"title":"News", "href":"http://news.yahoo.com/", "target":"_blank" } 
    ]}, 
{"title":"Bing", "description":"Bing Search Engine"}, 
{"title":"Dogpile", "description":"Dogpile Search Engine"} 
]; 

$scope.sublinks = null; 
$scope.showSubMenu = function(item){ 
    $scope.sublinks = item.sublinks;  
}});

也许可以帮助你。

来源

2015-10-22 18:45:20

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

回答

相关问题