AngularJS – ngSelected Directive


The ngSelected Directive in AngularJS sets the selected attribute element on the element to True. We can also write an expression inside the ngSelected with the only condition that it should evaluate to True.

This special directive is necessary since interpolation cannot be used inside the selected attribute.

Syntax

<element ng-required="expression">..content..</element>

Example − ngSelected Directive

Create a file "ngSelected.html" in your Angular project directory and copy-paste the following code snippet.

<!DOCTYPE html>
<html>
   <head>
      <title>ngSelected Directive</title>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
      </script>
   </head>

   <body ng-app style="text-align: center;">
      <h1 style="color: green;">
         Welcome to Tutorials Point
      </h1>
      <h2>
         AngularJS | ngSelected Directive
      </h2>
      <label>Check me to select: <input type="checkbox" ng-model="selected" /></label><br />
      <select aria-label="ngSelected demo">
         <option>Welcome!</option>
         <option id="greet" ng-selected="selected">Welcome to Tutorials Point!</option>
      </select>
   </body>
</html>

Output

To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.

Updated on: 08-Oct-2021

117 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements