文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在select中使用angularjs filter和ng-options将某些选项设置为粗体

问如何在select中使用angularjs filter和ng-options将某些选项设置为粗体
EN

Stack Overflow用户

提问于 2020-06-29 14:07:21

回答 1查看 426关注 0票数 0

我使用AngularJS ng-options来填充特定的select元素。我想将一些选项设置为粗体，并将其禁用。我正在尝试使用filter和ng-options来实现这一点。我可以读取angular js的控制器端的值，但无法将它们设置为粗体或禁用。我检查了很多答案，但不知何故没有一个对我起作用。任何帮助都将不胜感激。

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

下面是Angularjs方法，它将数据返回到HTML并填充select：

//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);
    });
};

angularjs

angularjs-filter

angularjs-controller

javascript

html

回答 1

Stack Overflow用户

发布于 2020-06-29 14:31:28

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62632176

复制

相似问题

问如何在select中使用angularjs filter和ng-options将某些选项设置为粗体
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在select中使用angularjs filter和ng-options将某些选项设置为粗体EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在select中使用angularjs filter和ng-options将某些选项设置为粗体
EN