json ve angularJs

'u kullanarak kapsamdaki iç içe menü öğelerine erişme açısal olarak oldukça yeni ve açısal uygulamamdaki alt menü öğelerine erişmek için bir çözüm bulamıyorum. Ben üst düzey menü öğeleri erişebilir ancak aşağıda json ve angularJs

şimdiye kadar benim kodudur ikinci seviyede ürün almak için nasıl olarak kaybolduğum

html

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-app="list"> 
    <div ng-controller="ListCtrl"> 
    <ul> 
     <li ng-repeat="menu in menus" id="{{artist.id}}"> 
      <a ng-href="{{menu.content}}">{{menu.description}}</a> 
      <ul> 
       <li ng-href="{{menu.content}}">{{menu.menu}}</li> 
      </ul> 
     </li> 
    </ul> 
    </div> 
</html>

javascript

// Code goes here 
angular.module('list', []); 

function ListCtrl($scope, $http) { 
    $http({ 
    method: 'GET', 
    url: 'menu.json' 
    }).success(function(data) { 
    $scope.menus = data.menus; // response data 
    angular.forEach(data.menus, function(menu, index) { 

    }); 
    }); 
}

json

{ 
    "menus":[ 
     { 
     "id":"contact", 
     "leaf":true, 
     "description":"Contact Us", 
     "link":"", 
     "content":"contactUs.html", 
     "cssClass":"static-content", 
     "menu":null 
     }, 
     { 
     "id":"rules", 
     "leaf":false, 
     "description":"Sports Betting Rules", 
     "link":"", 
     "content":"", 
     "cssClass":"", 
     "menu":[ 
      { 
       "id":"types", 
       "leaf":true, 
       "description":"Wager Types", 
       "link":"", 
       "content":"wagerTypes.html", 
       "cssClass":"static-content wager-types", 
       "menu":null 
      }, 
      { 
       "id":"odds", 
       "leaf":true, 
       "description":"Odds & Lines", 
       "link":"", 
       "content":"oddsAndLines.html", 
       "cssClass":"static-content", 
       "menu":null 
      }, 
      { 
       "id":"policies", 
       "leaf":true, 
       "description":"Rules & Policies", 
       "link":"", 
       "content":"rulesAndPolicies.html", 
       "cssClass":"static-content rules-policies", 
       "menu":null 
      }, 
      { 
       "id":"bonuses", 
       "leaf":true, 
       "description":"Sports Bonuses", 
       "link":"", 
       "content":"sportsBonuses.html", 
       "cssClass":"static-content", 
       "menu":null 
      } 
     ] 
     }, 
     { 
     "id":"conditions", 
     "leaf":false, 
     "description":"Terms & Conditions", 
     "link":"", 
     "content":"", 
     "cssClass":"", 
     "menu":[ 
      { 
       "id":"termsOfService", 
       "leaf":true, 
       "description":"Terms of Service", 
       "link":"", 
       "content":"termsOfService.html", 
       "cssClass":"static-content", 
       "menu":null 
      }, 
      { 
       "id":"privacy", 
       "leaf":true, 
       "description":"Privacy Policy", 
       "link":"", 
       "content":"privacy.html", 
       "cssClass":"static-content", 
       "menu":null 
      } 
     ] 
     }, 
     { 
     "id":"view", 
     "leaf":true, 
     "description":"View in: Mobile | Full Site", 
     "link":"", 
     "content":"view.html", 
     "cssClass":"static-content", 
     "menu":null 
     } 
    ] 
}

kaynak

2017-01-02 sat

eklemek başka ng-repeat

<!DOCTYPE html> 
    <html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body ng-app="list"> 
     <div ng-controller="ListCtrl"> 
     <ul> 
      <li ng-repeat="menu in menus" id="{{artist.id}}"> 
       <a ng-href="{{menu.content}}">{{menu.description}}</a> 
       <ul> 
        <li ng-href="{{submenu.content}}" ng-repeat="submenu in menu.menu">{{submenu.id}}</li> 
       </ul> 
      </li> 
     </ul> 
     </div> 
    </html>

kaynak

2017-01-02 08:52:00

Bu menüde "ng-repeat =" alt menüsü olmalıdır. " – gzc

, sağ tarafınızda. sadece güncellemek –

çocuk öğelere erişmek için, siz olabilir,

<ul> 
     <li ng-repeat="menu in menus" id="{{artist.id}}"> 
     <a ng-href="{{menu.content}}">{{menu.description}}</a> 
     <ul> 
      <li ng-repeat="submenu in menu.menu"> 
      <a ng-href="{{menu.content}}">{{submenu.description}}</a> 
     </ul> 
     </li> 
</ul>

DEMO

var app = angular.module("app", []); 
 

 
app.controller("ListCtrl", ["$scope", 
 
    function($scope) { 
 

 
    $scope.menus = 
 
     [{ 
 
     "id": "contact", 
 
     "leaf": true, 
 
     "description": "Contact Us", 
 
     "link": "", 
 
     "content": "contactUs.html", 
 
     "cssClass": "static-content", 
 
     "menu": null 
 
     }, { 
 
     "id": "rules", 
 
     "leaf": false, 
 
     "description": "Sports Betting Rules", 
 
     "link": "", 
 
     "content": "", 
 
     "cssClass": "", 
 
     "menu": [{ 
 
      "id": "types", 
 
      "leaf": true, 
 
      "description": "Wager Types", 
 
      "link": "", 
 
      "content": "wagerTypes.html", 
 
      "cssClass": "static-content wager-types", 
 
      "menu": null 
 
     }, { 
 
      "id": "odds", 
 
      "leaf": true, 
 
      "description": "Odds & Lines", 
 
      "link": "", 
 
      "content": "oddsAndLines.html", 
 
      "cssClass": "static-content", 
 
      "menu": null 
 
     }, { 
 
      "id": "policies", 
 
      "leaf": true, 
 
      "description": "Rules & Policies", 
 
      "link": "", 
 
      "content": "rulesAndPolicies.html", 
 
      "cssClass": "static-content rules-policies", 
 
      "menu": null 
 
     }, { 
 
      "id": "bonuses", 
 
      "leaf": true, 
 
      "description": "Sports Bonuses", 
 
      "link": "", 
 
      "content": "sportsBonuses.html", 
 
      "cssClass": "static-content", 
 
      "menu": null 
 
     }] 
 
     }, { 
 
     "id": "conditions", 
 
     "leaf": false, 
 
     "description": "Terms & Conditions", 
 
     "link": "", 
 
     "content": "", 
 
     "cssClass": "", 
 
     "menu": [{ 
 
      "id": "termsOfService", 
 
      "leaf": true, 
 
      "description": "Terms of Service", 
 
      "link": "", 
 
      "content": "termsOfService.html", 
 
      "cssClass": "static-content", 
 
      "menu": null 
 
     }, { 
 
      "id": "privacy", 
 
      "leaf": true, 
 
      "description": "Privacy Policy", 
 
      "link": "", 
 
      "content": "privacy.html", 
 
      "cssClass": "static-content", 
 
      "menu": null 
 
     }] 
 
     }, { 
 
     "id": "view", 
 
     "leaf": true, 
 
     "description": "View in: Mobile | Full Site", 
 
     "link": "", 
 
     "content": "view.html", 
 
     "cssClass": "static-content", 
 
     "menu": null 
 
     }] 
 
    ; // response data 
 

 

 
    } 
 
]);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> 
 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 

 
    <script data-require="[email protected]" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script> 
 

 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app='app'> 
 
    <div ng-controller="ListCtrl"> 
 
    <ul> 
 
     <li ng-repeat="menu in menus" id="{{artist.id}}"> 
 
     <a ng-href="{{menu.content}}">{{menu.description}}</a> 
 
     <ul> 
 
      <li ng-repeat="submenu in menu.menu"> 
 
      <a ng-href="{{menu.content}}">{{submenu.description}}</a> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

kaynak

2017-01-02 08:52:15 Sajeetharan

cevap

İlgili konular