显示选项中显示的标签作为 select 的标题

Question

如何在不使用 java script 和更改 ng-model 的情况下将 option.Brand.Name 显示为 select 字段的标题？

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

Answer 1

您需要在 select 中执行 ng-change 事件并调用其中的函数，将标签文本的值更改为 select 值名称。像下面这样的东西在Html

ng-change="changedValue(detail.BrandId)"

在 JS 中

$scope.changedValue = function(item) {
    //change label name here
  }

Answer 2

用"option"而不是"option.BrandId"

填充ng-model

然后你可以这样设置标题:

mainCtrl.products['ng-model-name'].Brand.Name

Answer 3

以下是实现此目标的方法：

(function () {
 "use strict";
 const app = angular.module("app", []);
  
 app.controller("app.AppCtrl", $scope => {
    $scope.selectedOption = null;
    $scope.optionList = [{_id: 1, label: 'Option 1'}, {_id: 2, label: 'Option 2'}];
  });
  
})();

body {
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="app.AppCtrl">
 <select title="{{selectedOption.label}}" class="form-control" ng-model="selectedOption">
  <option ng-repeat="option in optionList" ng-value="option"> {{option.label}}</option>
 </select>
</div>

Answer 4

尝试使用 ng-init,

将 ng-init 添加到您的 select 标签中，并在默认情况下输入您想要 selected 的对象索引值。

例如您的代码

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

添加以下代码（假设我想要按索引索引 0）：

ng-init="detail.BrandId = option[0].Brand.Name"

它看起来像这样：

<select ng-model="detail.BrandId"  ng-init="detail.BrandId = option[0].Brand.Name" 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>

或检查这些线程的

how to use ng-option to set default value of select element

Answer 5

您可以使用 as alias-expression 在 ng-repeat parent 范围内注册所选选项 object =18=]。在你的情况下，你只需要做这样的事情：

<select ng-model="detail.BrandId" 
        title="{{options | selectedProductFilter : detail.ProductId}}" 
        class="form-control" 
        disabled>
    <option ng-repeat="option in mainCtrl.products as options" 
            ng-selected="option.Id === detail.ProductId" 
            ng-value="option.BrandId">
        {{option.Brand.Name}}
    </option>
</select>

选项 object 将在您的控制器闭包中可用，您可以使用自定义过滤器显示标题。

angular.module("app").filter('selectedProductFilter',
    function () {
        return function (input, id) {
            if (!input) return "";
            let occurence = input.filter(function (x) {
                return x.Id == id;
            });
            return occurence.length > 0 ? occurence[0].Brand.Name: "";
        }
    }
);

Answer 6

AngularJS 和 select-options

尝试在 select 元素本身中使用 ng-options AngularJS ngOptions directive。然后你不需要使用 ng-repeat.

自己添加每个 option 元素

澄清

标题-属性属于select-元素，如果您将鼠标悬停在select.您希望标题显示 当前 selected 选项？我的理解正确吗？

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

很好奇，这个 detail.ProductId 来自哪里？该品牌是否由 product-id 预select 编辑（请参阅您的代码）？

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

解决方案space

您的 requirements/restrictions 是：

不使用 JavaScript（可能是因为您无法更改来源）
而不更改 ng-model（因为对于某些 database-reasons，您只需要 BrandId）

所以由于select-element的title无法访问里面的选项，只能根据当前的select设置离子，即您的 detail.BrandId。所以title只能通过standard-angularJS的方式动态设置（取决于当前的selection），如：

{{ expression }} expressions
{{ expression | filter }} array-filter

预期行为

唯一被 select 更改的 scope-variable 在 select 的 ng-model 中指定为 detail.BrandId。这将在用户 select 对其属性 BrandId 发送 option 时设置。当用户 selects 在选项之间时，他们将以 BrandName 作为标签可见。在 selection 之后，此 BrandName（选项的标签）应显示为整个 select 元素的 title。

所以我们需要从detail.BrandId (selected ng-model) 得到相关的选项BrandName (像这样应显示为标题）。

可能的解决方案

唯一的方法是使用标准 angular expressions/filters/array-indexing 通过 selected detail.BrandId (ng-model)[=42= 获得整个选项]

然后我们可以 lookup option.BrandName 等式在 selected detail.BrandId === option.BrandId 之后

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。

显示选项中显示的标签作为 select 的标题

Display label displayed in options as the title of select

html

angularjs

angularjs-ng-repeat

AngularJS 和 select-options

澄清

解决方案space

预期行为

可能的解决方案

另见