Question

我有一个用户界面选择，我需要在html span标签中显示颜色，我使用ng-style输入颜色，在ng-select-choices中可以使用，但是在{ {1}}不起作用

ui-select-match

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

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

ng-style在ui-select-match- AngularJs中不起作用

1 个答案: