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>

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

有关详细信息，请参阅

• 为什么混合插值和表达式是不行的