リストグループとdivの項目を切り替えるには

Question

私はHTMLページを持っています。上半分は静的で下半分は動的です。このページのモバイルビューでは、下半分は各項目がカテゴリを表すリストグループです。

アイテムをクリックすると、リストグループが消滅し、そのカテゴリの詳細が画面に表示されます。また、上記の静的な部分は影響を受けてはいけません。どうすればこれを達成できますか？

Answer 1

あなたが簡単にUI-ルータおよびマルチ命名ビューまたはネストされたビューを使用して達成することができます：あなたの入力

<a ui-sref="the_state" class="list-group-item list-group-nav-item">Category 1</a> 

で

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

$stateProvider.state('nestedViews', { 
     url: '/nested-views', 
     views: { 
      '': { 
       templateUrl: 'components/nestedViews/partial-nested-views.html' 
      }, 
      'columnOne@nestedViews': { 
       templateUrl: 'components/nestedViews/partial-nested-views-content.html' 
      }, 
      'columnTwo@nestedViews': { 
       templateUrl: 'components/nestedViews/partial-nested-views-menu.html' 
      } 
     } 
    }); 

あなたのHTMLで

<div class="row"> 
    <div class="col-sm-9"> 
     <div ui-view="columnOne"></div> 
    </div> 
    <div class="col-sm-3"> 
     <div ui-view="columnTwo"></div> 
    </div> 
</div> 

を