Html 显示“选项”中显示的标签作为“选择”的标题

如何显示

option.Brand.Name

作为

选择

字段的标题，而不使用

java脚本

和更改

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>

{{option.Brand.Name}

您需要在

select

中执行

ng change

事件，并调用其中的函数，将标签文本的值更改为select value name。像下面这样 在Html中

在JS中

通过“option”而不是“option.BrandId”填充ng模型

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

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

---

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

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

（函数（）{
“严格使用”；
常数app=angular.module（“app”，[]）；
app.controller（“app.AppCtrl”，$scope=>{
$scope.selectedOption=null；
$scope.optionList=[{u id:1，标签：'Option 1'}，{{u id:2，标签：'Option 2'}]；
});
})();
正文{
利润率：20px；
}

{{option.label}
尝试使用ng init

将ng init添加到select标记中，并将默认情况下要选择的对象索引值放入其中

e、 g。
你的代码

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

它将如下所示：

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


{{option.Brand.Name}

或者检查这些线的


您可以使用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>

AngularJS并选择选项
尝试在
选择
元素本身中使用
ng选项
。然后您不需要使用
ng repeat
自己添加每个
选项
元素

澄清
title-属性属于select-元素，如果您将鼠标悬停在select上，该属性将显示出来。您想让标题显示当前选定的选项吗？我没听错吧

如何将
选项.Brand.Name
显示为
选择
字段的
标题

好奇，这个
detail.ProductId
来自哪里？品牌是否由产品id预先选择（参见您的代码）

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

解空间
您的要求/限制是：


而不使用JavaScript（可能是因为您无法更改源代码）
而不更改ng型号（因为出于某些数据库原因，您只需要那里的
品牌ID
）

因此，由于select元素的title无法访问其中的选项，因此设置它的唯一方法取决于当前选择，即您的
detail.BrandId
。因此，
标题
只能通过使用标准angularJS方式动态设置（取决于当前选择），如下所示：


{{expression}}
{{expression | filter}}

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

因此，我们需要从
detail.BrandId
（所选ng型号）获取相关选项
BrandName
（如标题所示）

可能的解决办法
唯一的方法是使用标准角度表达式/过滤器/数组索引，通过所选的
detail.BrandId
（ng型号）获取整个选项

然后，我们可以在选择
detail.BrandId==option.BrandId
后，通过此等式查找
选项.BrandName


var-app=angular.module（'app'，[]）；
应用程序控制器（'mainCtrl'，函数（$scope）{
$scope.products=[
{Id:0，名称：'Watson'，brandId:1，brandName:'IBM}，
{Id:1，name:'DB2'，brandId:1，brandName:'IBM}，
{Id:2，名称：“Windows”，品牌Id:2，品牌名称：“Microsoft”}，
{Id:3，名称：'Office'，品牌Id:2，品牌名称：'Microsoft'}
];
$scope.detail={ProductId:3，BrandId:null}；
});

产品IdProduct NAME选择品牌Id
{{detail.ProductId}
{（产品|过滤器：{Id:detail.ProductId}）[0].name}
--请选择品牌--
{{detail.BrandId}

产品是预定义的。因此，品牌是按产品预先选定的。但是：选择品牌后，产品细节不会改变

选定的详细信息：
{{detail | json}
@Shaheryar.Akram感谢您的建议，但这对我来说不起作用。只需使用ng attr title=“{{detail.Brand.Name}”@minalfy感谢您的建议，但我不想将ng模型更改为“detail.Brand”，确切地说，您为什么要这样做？这听起来更像是糟糕的设计。由于空间的原因，上面的select字段是表中众多字段之一，用户将无法立即查看“Brand.Name”，他们需要刷新才能通过tooltipThanks查看它，以便发布建议的解决方案，但正如我在问题中所指出的，我正在寻找一个不使用javascript的解决方案。您可以更改标签文本，只需将标签与作用域绑定，使您的标签类似
{{myFieldLabel}
并将其添加到更改值函数
$scope.myFieldLabel=item谢谢，但我正在寻找没有JS中更改功能的解决方案。谢谢你的建议，但是我不希望更改ng模型，因为BrandId连接到我的db。为此，你可以使用setter
<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>

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

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: "";
        }
    }
);