如何使用 angularjs 过滤器和 ng-options 在 select 中使某些选项变粗

Question

我正在使用 AngularJS ng-options 来填充某些 select 元素。 我想让一些选项加粗并禁用它们。 我正在尝试使用filter和ng-options来实现这一点。 我能够读取 angular js 的 controller 一侧的值，但我无法将它们设为粗体和禁用。 我检查了很多答案，但出于某种原因，没有一个对我有用。 任何帮助，将不胜感激。

HTML Code for the select ：

//HTML SELECT
<select class="form-control" id="ObjectId" ng-change="ObjectEventEPCsChange()" ng-model="formdata.ObjectId" ng-options='ObjectId.value as ObjectId.text  for ObjectId in ObjectIds |filter:MyFilter'>
    <option class="dropdown-item" value='' selected> Choose </option>
    <option class="dropdown-item" value="{{ ObjectId.value  }}"> {{ ObjectId.text }} </option>
</select>

ÀngularJS Controller function for filter : //根据条件使一些选项加粗和禁用

$scope.MyFilter = function(item) {
    if(item.text == 'ABCD')
    {
        console.log(item.toString().replace(item.text,"<strong>"+item.text+"</strong>"));
        return item.toString().replace(item.text,"<b>"+item.text+"</b>")
    }
    else
    {
        return item.toString().replace(item.text,"&nbsp;"+item.text);
    }
}

填充Populating of the options ：我在 nodejs 中有选项，以下是填充到 Select 中的选项类型：

var ObjectTypeOptions  =    [
                                {value:'Option-1',      text:'Option-1'},
                                {value:'Option-2',      text:'Option-2'},
                                {value:'Option-3',      text:'Option-3'},
                                {value:'ABCD',          text:'ABCD'},
                                {value:'Option-4',      text:'Option-4'},
                            ];

var returnData = {'ObjectTypeOptions': ObjectTypeOptions};

callback(returnData);

以下是将数据返回到 HTML 并填充 select 的 Angularjs 方法：

//On load of the page populate the drop-downs
$scope.init = function () {
    $http({
        url: "/populateFields",
        method: "GET"
    }).success(function(response) {
        $scope.ObjectIds    =   response.ObjectTypeOptions;
    }).error(function(error) {
        console.log(error);
    });
};

Answer 1

您可以使用 ng-repeat 和 ng-disabled 进行禁用，例如：

 function TodoCrtl($scope) { $scope.ObjectIds = [{ value: "option1", text: "Option 1", class: "bold" },{ value: "option2", text: "Option 2", disabled: true }, { value: "option3", text: "Option 3" }]; }

 .bold { font-weight: bold; }

 <:DOCTYPE html> <html ng-app> <head> <script src="https.//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> <meta charset=utf-8 /> <title>ng-click</title> </head> <body> <div ng-controller="TodoCrtl"> <select class="form-control" id="ObjectId" ng-change="ObjectEventEPCsChange()" ng-model="formdata.ObjectId"> <option class="dropdown-item" value='' selected> Choose </option> <option ng-repeat="ObjectId in ObjectIds" class="dropdown-item" ng-class="ObjectId.class" ng-disabled="ObjectId.disabled" value="{{ ObjectId.value }}"> {{ ObjectId.text }} </option> </select> </div> </body> </html>

如何使用 angularjs 过滤器和 ng-options 在 select 中使某些选项变粗

问题描述

1 个解决方案

解决方案1
1 2020-06-29 06:31:28

如何使用 angularjs 过滤器和 ng-options 在 select 中使某些选项变粗

问题描述

1 个解决方案

解决方案1 1 2020-06-29 06:31:28

解决方案1
1 2020-06-29 06:31:28