bhylu.com

Advertisements

AngularJS Select and ngOptions

ngOptions connects a selection to a model while preserving a useful value contract. Decide whether the model should hold a primitive ID or an object, and handle an absent selection.

How it works

The desk stores a technician code rather than a display name. ngOptions maps each option to that stable code. The visible label can then change without silently changing the saved identity. A real service must still confirm that the selected technician is permitted and available; a browser option list is not an authorization or scheduling guarantee.

Run the code

AngularJS 1.8.3 is a legacy framework whose official support ended in January 2022. These examples teach maintenance, not a recommendation for a new application. They need a separate local browser page; Bhylu has no AngularJS playground.

In an empty folder save the HTML below as select.html and the server as lab-server.mjs. Make a vendor folder and save the four pinned libraries there, retaining their MIT notices. With Node 22 or later run node lab-server.mjs select.html, then open http://127.0.0.1:8136/. Stop that lab before running a different lesson. The server supplies fixed read-only HTTP fixtures; no data is saved and it does not connect to SQL. No PHP, Apache or MySQL configuration changes are needed.

Example

select.html

<!doctype html>
<html lang="en" ng-app="repairLab" ng-strict-di>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>AngularJS Select and ngOptions</title>
    <style>
      :root {
        font:
          18px/1.55 system-ui,
          sans-serif;
        color: #0f3464;
        background: #fff;
        color-scheme: light;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
      }
      main {
        max-width: 50rem;
        margin: auto;
        padding: 1.2rem;
      }
      h1 {
        font-size: 1.65rem;
      }
      label {
        display: block;
        margin: 0.6rem 0;
      }
      input,
      select,
      textarea,
      button {
        font: inherit;
        max-width: 100%;
        padding: 0.35rem;
        margin: 0.2rem;
      }
      button {
        border: 1px solid #034fa0;
        border-radius: 0.25rem;
        background: #034fa0;
        color: white;
      }
      button:disabled {
        opacity: 0.55;
      }
      output,
      [role="status"] {
        display: block;
        min-height: 1.5rem;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      td,
      th {
        padding: 0.4rem;
        border: 1px solid #a5bbd4;
        text-align: left;
      }
      pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      :focus-visible {
        outline: 3px solid #0078d4;
        outline-offset: 3px;
      }
      [ng-cloak] {
        display: none !important;
      }
      .marked {
        font-weight: 700;
      }
      .error {
        color: #a02424;
      }
      :root[data-theme="dark"] {
        color: #d6e7fb;
        background: #061d30;
        color-scheme: dark;
      }
      :root[data-theme="dark"] .error {
        color: #ffb4b4;
      }
    </style>
  </head>
  <body>
    <main ng-controller="DeskController as vm" ng-cloak>
      <h1>Community repair desk</h1>
      <p>AngularJS 1.8.3 · Legacy maintenance lab · Local demonstration</p>
      <label
        >Technician<select
          ng-model="vm.selected"
          ng-options="person.id as person.name for person in vm.people"
        >
          <option value="">Choose one</option>
        </select></label
      >
      <p data-result>{{ vm.selected || "No technician" }}</p>
    </main>
    <script src="/vendor/angular.min.js"></script>
    <script>
      (function () {
        "use strict";
        var app = angular.module("repairLab", []);
        app.controller("DeskController", [
          function () {
            var vm = this;
            vm.people = [
              { id: "A1", name: "Mira" },
              { id: "B2", name: "Dev" },
            ];
            vm.selected = "A1";
          },
        ]);
      })();
    </script>
  </body>
</html>
Focus on the bindings and controller

This excerpt leaves out the document shell, styles and library files. Use the complete download to run it.


<label
  >Technician<select
    ng-model="vm.selected"
    ng-options="person.id as person.name for person in vm.people"
  >
    <option value="">Choose one</option>
  </select></label
>
<p data-result>{{ vm.selected || "No technician" }}</p>
<script>
  (function () {
    "use strict";
    var app = angular.module("repairLab", []);
    app.controller("DeskController", [
      function () {
        var vm = this;
        vm.people = [
          { id: "A1", name: "Mira" },
          { id: "B2", name: "Dev" },
        ];
        vm.selected = "A1";
      },
    ]);
  })();
</script>

Expected result

A1

Choosing Dev changes the stored code to B2. The browser test selects by visible label while asserting the model’s code, making the distinction observable. When objects are used as values, understand the framework’s identity and tracking rules rather than constructing a new lookalike object and expecting automatic selection.

Advertisements