AngularJS + SwitchCase通过单击列表项来呈现不同的URL

时间:2014-10-17 09:00:38

标签: html angularjs routing

我是AngularJs的初学者,在我的angularapp中,我想根据左侧菜单中的选项选择传递URL。但我没有办法访问这些。

<ion-content>
  <ul class="list">
    <a href="#/ShowItems" class="item" menu-close>Yahoo</a>
    <a href="#/ShowItems" class="item" menu-close>Google</a>
  </ul>
</ion-content>

ScriptPage模板

<script id="templates/show_items.html" type="text/ng-template">
  <ion-view title="Yahoo">
    <ion-content>
      <form class="list" ng-show="showForm">
        <div class="item item-divider">
          URL Info
        </div>
        <label class="item item-input">
          <input type="text" placeholder="CurrentURL" ng-model="">
        </label>
        <div class="padding">
          <button class="button button-block" ng-click="submit()">Checkin</button>
        </div>
      </form>
    </ion-content>
  </ion-view>
</script>

我试图在角度中添加switch case(根据URL的选择)将呈现特定页面。

提前多多感谢。

更新

添加了几个链接以我想要显示页面的方式。我希望页面标题按照链接点击并在布局中呈现该页面。

CodePen Link

1 个答案:

答案 0 :(得分:0)

您可以使用

HTML

<ion-content>
  <ul class="list">
    <a href="#/ShowItems" class="item" menu-close ng-click="item('yahoo')">Yahoo</a>
    <a href="#/ShowItems" class="item" menu-close ng-click="item('google')">Google</a>
  </ul>
</ion-content>

控制器

$scope.item = function(site){
      if(site == 'yahoo'){
            $scope.currentURL = "www.yahoo.com";
      }else{
            $scope.currentURL = "www.google.com";
      } 
}

并在输入中输入{{currentURL}},如您所愿。