Question

我需要添加两个不同的颜色按钮，但按钮需要根据Web服务响应显示颜色 if status= "open"绿色按钮 if status= "closed红色按钮

<a class="button icon button-block button-calm icon-right ion-android-arrow-dropright-circle" href="#" ng-repeat= "file in file">File Ref No:{{file.num}}<br>
            Description:{{file.descript}}<br>
            Status:{{file.status}}</a><br>

Answer 1

请试试这个，

＆＃13;

function MyCtrl($scope) {
    $scope.file = [{
        num: '1',
        descript: 'File Description 1',
        status: 'closed'
    }, {
        num: '2',
        descript: 'File Description 2',
        status: 'open'
    }]
}

＆＃13;

<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    <a class="button icon button-block button-calm icon-right ion-android-arrow-dropright-circle" ng-class="{'button-balanced': f.status == 'open', 'button-assertive': f.status == 'closed'}" href="#" ng-repeat="f in file" >File Ref No:{{f.num}}<br>
            Description:{{f.descript}}<br>
            Status:{{f.status}}</a>
    <br>
</div>

＆＃13;

Answer 2

您可以使用 ng-class 指令（请参阅https://docs.angularjs.org/api/ng/directive/ngClass），因此根据＆＃39; status＆＃39;的值将不同的CSS类应用于按钮。（应该是控制器范围的属性）：

<a class="button icon button-block icon-right ion-android-arrow-dropright-circle" href="#" ng-repeat= "file in file" ng-class="{'button-balanced': status == 'open', 'button-assertive': status == 'close'}">

PS：请注意，您不能将ng-class（或任何其他指令）直接绑定到服务中的变量，但是您需要将该变量分配给范围中的属性

根据条件离子改变按钮颜色

2 个答案: