如何不修改ng-model且不使用JS，将option.Brand.Name设为select标题？

云上老周

2026-5-11

解决方案

你可以利用AngularJS的动态属性绑定和内置过滤器来实现这个需求，完全不需要额外的JavaScript代码，也不用修改现有的ng-model。

核心思路是通过Angular的表达式，直接从mainCtrl.products数组中筛选出当前选中的选项对应的Brand.Name，并绑定到<select>的title属性上。

修改后的代码如下：

<select ng-model="detail.BrandId" 
        ng-attr-title="{{(mainCtrl.products | filter:{Id: detail.ProductId})[0]?.Brand.Name || ''}}" 
        class="form-control" 
        disabled>
  <option ng-repeat="option in mainCtrl.products" 
          ng-selected="option.Id === detail.ProductId" 
          ng-value="option.BrandId">
    {{option.Brand.Name}}
  </option>
</select>

关键部分说明：

ng-attr-title：AngularJS专门用来动态绑定HTML属性的指令，它会把表达式的计算结果赋值给元素的title属性。
(mainCtrl.products | filter:{Id: detail.ProductId})：使用内置的filter过滤器，从产品数组中筛选出Id与detail.ProductId匹配的项（也就是当前选中的选项对应的产品对象）。
[0]?.Brand.Name：因为过滤器返回的是数组，我们取第一个元素（假设每个ProductId是唯一的）；?.是可选链操作符，避免在没有匹配项时抛出错误。
|| ''：当没有匹配项时，将title设置为空字符串，避免显示undefined。