2017-03-15 238 views
0

enter image description here流星更改選擇標籤顏色

我有以下選擇

{{#each orders_db}} 
     <tr> 
     <td>{{item}}</td> 
     <td> 
     <select class="bootstrapselect orderstatus"> 
      <option data-content="<span class='label label-info'>{{status}}</span>">{{status}}</option> 
         <option disabled>--------</option> 
    <option data-content="<span class='label label-primary'>Awaiting</span>">Awaiting</option> 
    <option data-content="<span class='label label-info'>Taken</span>">Taken</option> 
    <option data-content="<span class='label label-success'>Delivered</span>">Delivered</option> 
    <option data-content="<span class='label label-warning'>Shipped</span>">Shipped</option> 
    <option data-content="<span class='label label-danger'>Cancelled</span>">Cancelled</option> 
      </select> 
     </td> 
     <td>{{client}}</td> 
     <td>{{location}}</td> 
     <td>{{responsible}}</td> 
     </tr> 
    {{/each}} 
在JS

如何改變取決於狀態的價值

? 例如。運送應該有標籤警告,取消應該有標籤危險等。

回答

1

你可以只創建一個輸入status並返回標籤的輔助

//html 
<option data-content="<span class='label label-info {{getLabel status}}'>{{status}}</span>">{{status}}</option> 

//template js 
const labels = { 
    cancelled: "label-danger", 
    shipped: "label-warning", 
    ... 
} 
Template.templateName.helpers({ 
    'getLabel':function(status){ 
    return labels[status]; 
    } 
}