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,"&nbsp;"+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);
    });
};

please post an example of the data you operate with. Or better, write some demo in Plunker or similar — Maxim Shoustin
– Maxim Shoustin, Commented Jun 29, 2020 at 6:12
Do you use any bootstrap theme? The native browser dropdown does not have bold style option as I know — Maxim Shoustin
– Maxim Shoustin, Commented Jun 29, 2020 at 6:24

Shivaji Mutkule · Accepted Answer · 2020-06-29 07:02:54Z

1

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>

edited Jun 29, 2020 at 7:02

answered Jun 29, 2020 at 6:31

Shivaji Mutkule

1,2981 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BATMAN_2008 Over a year ago

Thanks in this way the Bold would work, How can I make them disabled? I have to use the filter right?

BATMAN_2008 Over a year ago

Thanks a lot for the detailed explanation and code. This would work perfectly for me. Just out of curiosity is there a way this can be done by using the filter just so that if the data is coming from the database where I do not have the option to add the class and disabled at the origin itself then wanted to know how can I do that using the filter option.

Collectives™ on Stack Overflow

how to make certain options bold in select using angularjs filter and ng-options

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related