2015-11-30 309 views
1

只是我需要添加兩種不同顏色的按鈕,但該按鈕需要根據網絡服務響應 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> 

回答

2

你可以表現出彩使用納克級指令(見https://docs.angularjs.org/api/ng/directive/ngClass)的基礎上,「狀態」的值,因此應用不同的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:請注意,你不能從一個服務綁定納克級(或任何其他指令)直接給一個變量,但你需要的是變量分配給一個屬性範圍

3

請試試這個,

function MyCtrl($scope) { 
 
    $scope.file = [{ 
 
     num: '1', 
 
     descript: 'File Description 1', 
 
     status: 'closed' 
 
    }, { 
 
     num: '2', 
 
     descript: 'File Description 2', 
 
     status: 'open' 
 
    }] 
 
}
<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>