如何在角度中将一个按钮设为默认值?

时间:2016-06-28 12:38:25

标签: angularjs node.js angular-material

我在角度材质代码中有一组按钮,所以我想将第一个按钮设为默认按钮,它在右侧显示该按钮的内容。

wishlists button

我已经编写了如下代码,它会在我点击按钮后显示结果。

<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>

1 个答案:

答案 0 :(得分:0)

您要实现的目的是在显示页面时将第一个项目选为默认项目。为此,控制器应在加载后为列表中的第一个项运行showItems方法。

我不知道你的控制器或服务是什么样的,但它会像(在你的控制器中)

itemsService.loadItems().then(function(items) {
    showItems(items[0]);
});