使用ng-if或ng-switch在href(Ionic)之间切换

时间:2016-02-04 19:55:26

标签: javascript angularjs ionic-framework

在Ionic项目上工作,用户可以将饮料添加到他喜欢的列表中。饮品享有2次景致。查看1:饮料的一般清单和视图2:新添加的饮料。这意味着每个视图都有自己的详细信息页面。

因此,当用户进入“我的收藏夹”视图时,他将看到他最喜欢的饮料来自视图1并查看2.因此,当点击例如属于视图1的饮料时,它将具有不同的href然后a饮料来自观点2。

以下是我的收藏夹视图代码:

  <ion-content class="padding">

        <div class="row responsive-md" >
            <div class="col col-33">    
                <div>
                    <!-- View 1 GENERAL LIST OF DRINKS-->
                    <a href="#/app/gin-mixes-detail/{{drink.id}}" class="grid-gin-mixes" ng-repeat="drink in favs = (user.current.favorites) track by $index">
                        <img class="gin-mixes-placeholder" ng-src="{{drink.src}}">
                        <p>{{drink.title}}</p>
                    </a>

                    <!-- View 2 NEWLY ADDED DRINKS -->
                    <a href="#/app/newly-added-detail/{{drink.id}}" class="grid-gin-mixes" ng-repeat="drink in favs = (user.current.favorites) track by $index">
                        <img class="gin-mixes-placeholder" ng-src="{{drink.src}}">
                        <p>{{drink.title}}</p>
                    </a>
                </div>
            </div>
        </div> 
  </ion-content>

我需要的是当用户点击饮料时从视图2说它将知道使用正确的href。所以我需要知道如何使用ng-if或ng-switch最好地解决这个问题。以及如何实现它。

1 个答案:

答案 0 :(得分:1)

不需要单独的模板,也不需要维护不同的模板。相反,我会ng-href通过href插值有条件地呈现{{}}

<强>标记

ng-href="{{'#/app/'+(drinkType=='general'?'gin-mixes-detail':'newly-added-detail')+/drink.id}}"