how to make certain options bold in select using angularjs filter and ng-options
Question
I am using the AngularJS ng-options to populate certain select element. I would like to make some options bold and make them disabled. I am trying to achieve this using the filter along with ng-options . I am able to read the values on the controller side of the angular js but I am unable to make them bold and disabled. I checked lot of answers but some reason none worked for me. Any help would be appreciated.
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 : //Make some options bold and Disabled based on conditions
$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," "+item.text);
}
}
Populating of the options : I have the options in nodejs and following are the type of options that are populated into the 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);
Following is the Angularjs method that returns the data to HTML and populates the 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);
});
};
1 answers
solution1
1 2020-06-29 06:31:28
You can use ng-repeat and ng-disabled for disabling like:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.