Angular ngClass不會更改類的值

Question

我有以下html：

<div class="search-input">
            <div class="selects">
              <div class="icon fluid select" ng-init="focused=false">
                <i  ng-class="{'large svg icon guests {{focused}} ':rooms==2, 'large svg icon guest {{focused}}':rooms==1}"></i>
                <label ng-click="closeCalendar();">
                  <select ng-model="rooms" ng-change="focused=true" name="rooms" class="fluid" name="rooms" focus-parent selecter required>
                      <option value="1">Einzelzimmer</option>
                      <option value="2">Doppelzimmer</option>
                  </select>
                </label>
              </div>
            </div>
          </div>

我想在用戶單擊select時更改的類，所以我有ng-change將值變成true，當頁面加載時，我有：

ng-class="{'large svg icon guests {{focused}} ':rooms==2, 'large svg icon guest {{focused}}':rooms==1}"

和

class=large svg icon guests false

我認為是正確的，當用戶單擊選擇時，第一行變為

ng-class="{'large svg icon guests true ':rooms==2, 'large svg icon guest true':rooms==1}"

但是班級仍然large svg icon guests false

知道為什么班級沒有變化嗎？

Answer 1

嘗試這個

<i  class="large svg icon {{focused}}" ng-class="{guests:(rooms==2), guest:(rooms==1)}"></i>

您正在嘗試在指令內進行插值，我相信更好的解決方案是將插值與上述條件分開。 您可以將所有狀態類和插值包含在commonl類標記中，然后僅將ng-class用於條件類