ng-style 在 ui-select-match-AngularJs 中不起作用 [重复]

Question

我有一个 ui-select，我需要在 html span 标记中显示颜色，我使用 ng-style 输入颜色，在 ng-select-choices 中有效，但在 ui-select-match 中无效

<div class="form-group container-fluid">
    <label class="col-md-2 control-label">Categoría:</label>
    <div class="col-md-10">
      <ui-select ng-model="activity.category"
                 theme="bootstrap"
                 title="Selecciona una categoría">
        <ui-select-match placeholder="Selecciona una categoría">
          {{ $select.selected.name }} 
          <span style="width: 10px;
                       height: 10px;
                       border-radius: 50%;
                       display: inline-block"
                ng-style="{'background-color': '{{$select.selected.color}}'}">
          </span>
        </ui-select-match>
        <ui-select-choices repeat="category in categories | filter: $select.search">
          {{ category.name }} 
          <span style="width: 10px; height: 10px;
                       border-radius: 50%; display: inline-block"
                ng-style="{'background-color': '{{category.color}}'}">
          </span>
        </ui-select-choices>
      </ui-select>
    </div>
</div>

为什么它不起作用？有什么办法可以让它工作吗？

Answer 1

从表达式中去掉双花括号{{ }}插值：

<div class="form-group container-fluid">
    <label class="col-md-2 control-label">Categoría:</label>
    <div class="col-md-10">
      <ui-select ng-model="activity.category"
                 theme="bootstrap"
                 title="Selecciona una categoría">
        <ui-select-match placeholder="Selecciona una categoría">
          {{ $select.selected.name }} 
          <span style="width: 10px;
                       height: 10px;
                       border-radius: 50%;
                       display: inline-block"
                ̶n̶g̶-̶s̶t̶y̶l̶e̶=̶"̶{̶'̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶-̶c̶o̶l̶o̶r̶'̶:̶ ̶'̶{̶{̶$̶s̶e̶l̶e̶c̶t̶.̶s̶e̶l̶e̶c̶t̶e̶d̶.̶c̶o̶l̶o̶r̶}̶}̶'̶}̶"̶
                ng-style="{'background-color': $select.selected.color}" >
          </span>
        </ui-select-match>
        <ui-select-choices repeat="category in categories | filter: $select.search">
          {{ category.name }} 
          <span style="width: 10px; height: 10px;
                       border-radius: 50%; display: inline-block"
                ̶n̶g̶-̶s̶t̶y̶l̶e̶=̶"̶{̶'̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶-̶c̶o̶l̶o̶r̶'̶:̶ ̶'̶{̶{̶c̶a̶t̶e̶g̶o̶r̶y̶.̶c̶o̶l̶o̶r̶}̶}̶'̶}̶"̶
                ng-style="{'background-color': category.color}" >
          </span>
        </ui-select-choices>
      </ui-select>
    </div>
</div>

不能保证它适用于每个指令，因为插值本身就是一个指令。如果另一个指令在插值运行之前访问属性数据，它将获得原始插值标记而不是数据。

有关详细信息，请参阅

• Why mixing interpolation and expressions is bad practice