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

Question

这个问题在这里已有答案：

• Why mixing interpolation and expressions is bad practice 2回答

我有一个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