在Angular模板中設置類值

我是一個角度新手，我正在努力處理一些我認爲很簡單的事情。在Angular模板中設置類值

我有一個模板，在我的應用程序的表單只讀版本中使用。這個模板顯示狀態字段將被稱呼根據其值（文/背景色），例如

「新問題」 - 橙「正在處理」 - 綠色「逾期」 - 紅

等...

我的CSS是類似的;

.status-bar {padding: 3px; border: solid 1px #333} 
.new-issue {background-color: orange; color: #000} 
.in-progress {background-color: green; color: #fff} 
.overdue {background-color: red; color: #fff}

問題狀態字段可通過控制器，我用這樣的代碼來顯示它。

<div class="status-bar">{{issue.status}}</div>

所有工作正常。

然後我天真地試圖簡單地插入類名作爲表達，如

<div class="status-bar {{issue.status}}">{{issue.status}}</div>

以爲會給我一個這樣的輸出..

<div class="status-bar overdue">overdue</div>

但事實並非如此工作。我已經看過ng-class指令和其他選項，但不能解決這個問題。

理想情況下，我需要一個解決方案，允許我添加/插入基於值的類名（而不是像ng-class一樣的真/假）。所以我想我的oputput HTML是像下面...

<div class="status-bar in-progress">In Progress</div>

<div class="status-bar new-issue">New Issue</div>

<div class="status-bar overdue">overdue</div>

等等

範圍狀態值可能會改變，所以我的班級名稱必須按照上述模式計算

e.g，

<div class="status-bar another-status">Another Status</div>

所以我需要一種方法來連字符和小寫我issue.status值，然後將其添加爲一個類名。我認爲一個指示是前進的方向，這將是理想的，所以我可以在其他觀點中使用它。

在jQuery等事實之後，這很容易做到，但是我看不到'Angular'的方式來做到這一點？！

非常感謝前期提供的任何幫助...

來源

2014-03-19 RussK

ng-class與自定義過濾器是你在找什麼？

HTML

<h1 ng-class="class1">{{class1 | titleCase}}</h1>

app.filter('titleCase', function() { 
    return function (input) { 
    var words = input.split('-'); 
    for (var i = 0; i < words.length; i++) { 
     words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1); 
    } 
    return words.join(' '); 
    } 
});

，並在這裏工作PLUNKER ...

來源

2014-03-19 20:28:26

如果這是你的答案請upvote它... –

這是完美的！謝謝。 – RussK

你正在尋找可能是http://docs.angularjs.org/api/ng/directive/ngClass。您可能還需要看看AngularJS ngClass conditional

來源

2014-03-19 09:16:45 michas84

納克級應該工作：

<div class="status-bar" ng-class="issue.status">{{issue.status}}</div>

工作小提琴：http://jsfiddle.net/w2SFr/2/

來源

2014-03-19 09:19:09

謝謝，但只允許我使用這個問題狀態「是」一類的名字。我需要將連字符和小寫狀態值（例如「進行中」）更改爲「正在進行中」 – RussK

只需添加一個自定義過濾器即可。 –

在Angular模板中設置類值

回答

相關問題