Question

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

<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

您可以使用ng-repeat提供的作为别名表达式在ng-repeat父作用域中注册选定的选项对象。就您而言，您只需要执行以下操作即可：

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

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

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 2

AngularJS和选择选项

尝试在ng-options元素本身内使用select AngularJS ngOptions directive。然后，您无需使用option自己添加每个ng-repeat元素。

澄清

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

如何将option.Brand.Name显示为title字段的select

很好奇，这个detail.ProductId来自哪里？是否通过产品ID（请参见代码）预先选择了品牌？

ng-selected =“ option.Id === detail.ProductId”

解决方案空间

您的要求/限制是：

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

因此，由于select元素的 title 无法访问其中的选项，因此唯一的设置方法取决于当前的选择，即您的detail.BrandId。因此title只能使用standard-angularJS方式动态设置（取决于当前选择），例如：

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

预期行为

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

因此，我们需要从detail.BrandId（选定的 ng模型）到相关选项BrandName（因为它应该显示为标题）。

可能的解决方案

唯一的方法是使用标准的角度表达式/过滤器/数组索引来获取所选detail.BrandId（ng模型）的整个选项

然后我们可以在选择option.BrandName

后通过此等式查找 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。

Answer 3

您需要在ng-change中进行select事件并在其中调用将标签文本的值更改为选择值名称的函数。像下面这样以HTML格式

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

在JS中

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

Answer 4

通过“选项”而不是“ option.BrandId”填充ng-model

然后您可以这样设置标题：

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

Answer 5

这是您可以实现的方式：

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

尝试使用 ng-init ，

将 ng-init 添加到您的选择标记中，并将您要选择的对象索引值默认设置为

。

例如您的代码

<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

How to set default value in ng-options

显示标签中显示的标签作为选择的标题

6 个答案:

AngularJS和选择选项

澄清

解决方案空间

预期行为

可能的解决方案

另请参见