我在角度材质代码中有一组按钮,所以我想将第一个按钮设为默认按钮,它在右侧显示该按钮的内容。
我已经编写了如下代码,它会在我点击按钮后显示结果。
<div layout="row" layout-align="space-between">
<div class="list" style="width:30%;height:50px">
<div layout="column" ng-repeat="lists in vm.result | filter:searchText">
<div layout="row" layout-align="space-around">
<md-button class="md-raised" ng-click="vm.showItems(lists._id)">{{lists.wName}}'s Wish List {{$index}}</md-button>
<a style="margin-top:14px; cursor:pointer">{{lists.wType}}</a>
</div>
</div>
</div>
<div class="listItems" style="width:68%;height:400px;">
<div flex-xs flex-gt-xs="30" layout="row" ng-show="vm.showOnClick">
<md-card ng-repeat="product in vm.result" flex="30" style="max-width: 50%;">
<md-card-title>
<md-card-title-text>
<span class="md-subhead">{{product.Product_Name}}</span>
</md-card-title-text>
</md-card-title>
<md-card-title-media style="margin-left: -80px;">
<img ng-src="{{ product.Image }}" class="md-card-image" alt="Image here">
</md-card-title-media>
<md-card-title-text>
<span><span class="md-subhead" style="font-weight: bold; padding:2px;">Price: </span> {{ product.Price }}</span><br/>
<span><span class="md-subhead" style="font-weight: bold; padding:2px;">Brand:</span> {{ product.Brand }}</span><br/>
<span><span class="md-subhead" style="font-weight: bold; padding:2px;">Category: </span> {{ product.Category }}</span><br/>
</md-card-title-text>
</md-card>
</div>
</div>
答案 0 :(得分:0)
您要实现的目的是在显示页面时将第一个项目选为默认项目。为此,控制器应在加载后为列表中的第一个项运行showItems方法。
我不知道你的控制器或服务是什么样的,但它会像(在你的控制器中)
itemsService.loadItems().then(function(items) {
showItems(items[0]);
});