html - 显示选项中显示的标签作为选择的标题

如何将 option.Brand.Name 显示为 select 字段的标题，而不使用 java script 并更改 ng -型号？

<select ng-model="detail.BrandId" title="" 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>

最佳答案

AngularJS 和选择选项

尝试使用ng-options AngularJS ngOptions directive在 select 元素本身内。那么您不需要使用 ng-repeat 自己添加每个 option 元素。

澄清

title 属性属于 select 元素，如果您将鼠标悬停在选择上，则会显示该属性。您希望标题显示当前选择的选项吗？我对你的理解正确吗？

How to show option.Brand.Name as the title of the select field

很好奇，这个 detail.ProductId 来自哪里？品牌是否已按产品 ID 预先选择(请参阅您的代码)？

ng-selected="option.Id === detail.ProductId"

解决方案空间

您的要求/限制是:

不使用 JavaScript(可能是因为您无法更改来源)
无需更改 ng-model(因为出于某些数据库原因，您只需要 BrandId)

因此，由于 select-element 的 title 无法访问内部选项，因此设置它的唯一方法是根据当前选择，即您的 detail.BrandId.因此 title 只能通过使用 standard-angularJS 方式动态设置(取决于当前选择)，如下:

{{ 表达式 }} expressions
{{ 表达式 |过滤器}} array-filter

预期行为

通过选择更改的唯一范围变量在 select 的 ng-model 中指定为 detail.BrandId。当用户为其属性 BrandId 选择一个选项时，将设置此值。当用户在选项之间进行选择时，它们将以 BrandName 作为标签可见。选择后，此BrandName(选项标签)应显示为整个选择元素的标题。

因此，我们需要从 detail.BrandId (选择 ng-model)获取相关选项 BrandName (因为这应该显示为标题)。

可能的解决方案

唯一的方法是使用标准 Angular 表达式/过滤器/数组索引来通过所选的detail.BrandId(ng-model)获取整个选项

然后我们可以在选择detail.BrandId === option.BrandId<后通过这个方程查找option.BrandName/

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope){
  $scope.products = [
    {Id: 0, name: 'Watson', brandId: 1, brandName:"IBM"},
    {Id: 1, name: 'DB2', brandId: 1, brandName:"IBM"},
    {Id: 2, name: 'Windows', brandId: 2, brandName: "Microsoft"},
    {Id: 3, name: 'Office', brandId: 2, brandName: "Microsoft"}
  ];
  $scope.detail = { ProductId: 3, BrandId: null };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<!DOCTYPE html>
<html>
  <body data-ng-app="app" data-ng-controller="mainCtrl">
      <table border="1">
        <tr>
	  <th>Product Id</th><th>Product Name</th><th>Choose Brand</th><th>Brand Id</th>
        </tr>
        <tr>
          <td>{{detail.ProductId}}</td>
          <td>{{ (products | filter: {Id: detail.ProductId})[0].name }}</td>
          <td>
            <select class="form-control"
             ng-model="detail.BrandId" 
             ng-init="detail.BrandId = (products | filter: {Id: detail.ProductId})[0].brandId"
             ng-options="o.brandId as ('['+ o.Id +'] '+ o.name +' : '+ o.brandName  +' ('+ o.brandId +')') for o in products"
             title="{{ (products | filter: {brandId: detail.BrandId})[0].brandName}}"
            >
              <!-- default option when not preset by detail.ProductId-->
              <option value="">-- please choose brand --</option>
            </select>
        </td>
        <td>{{detail.BrandId}}</td>
      </tr>
    </table>

    <hr/>
      <p>Product is predefined. So the brand is pre-selected by product. BUT: after brand is selected, the product-details do NOT change!</p>
    Selected <strong>detail</strong>:
      <pre ng-model="selected">{{detail | json}}</pre>
   </body>
</html>

另请参阅

有关使用 ng-options，另请参阅 plunkr example .

关于html - 显示选项中显示的标签作为选择的标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54438380/