ng样式在ui选择匹配-AngularJs中不起作用

我有一个ui选择，我需要在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>

类别：
{{$select.selected.name}
{{category.name}

---

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

从表达式中删除双花括号

{{}

插值：

<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>

类别：
{{$select.selected.name}
{{category.name}

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

有关详细信息，请参阅

---

从表达式中删除双曲括号

{{}

插值：

<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>

类别：
{{$select.selected.name}
{{category.name}

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

有关详细信息，请参阅

---

我认为ng指令已经在角度上下文中执行，因此不需要使用{{}手动切换是记住它的好方法。与使用C#Razor页面切换上下文非常相似，我认为ng指令已经在角度上下文中执行，因此不需要使用{{}手动切换是记住它的好方法。就像用C#Razor页面切换上下文一样。