Additional options tests

tolyo · tolyo · commit 2d79681d2072 · 2025-06-21T12:48:32.000+03:00
diff --git a/@types/directive/options/options.d.ts b/@types/directive/options/options.d.ts
@@ -12,7 +12,7 @@ export const ngOptionsDirective: (
         post: (
           scope: import("../../core/scope/scope.js").Scope,
           selectElement: HTMLSelectElement,
-          attr: any,
+          attr: import("../../core/compile/attributes.js").Attributes,
           ctrls: any,
         ) => void;
       };
diff --git a/src/directive/options/options-example.html b/src/directive/options/options-example.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS</title>
+    <link rel="shortcut icon" type="image/png" href="images/favicon.ico" />
+    <script
+      type="module"
+      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"
+    ></script>
+  </head>
+  <body ng-app>
+    <section ng-init='values = [{ name: "A" }, { name: "B" }, { name: "C" }]'>
+      <select
+        ng-model="selected"
+        ng-options="value.name for value in values"
+      ></select>
+      {{ selected.name }}
+      <button ng-click="selected = values[0]">Select A</button>
+      <button ng-click="selected = values[1]">Select B</button>
+      <button ng-click="selected = values[2]">Select C</button>
+    </section>
+
+    <section ng-init='values1 = { 0: "X", 1: "Y", 2: "Z", a: "A", length: 3 }'>
+      <select
+        ng-model="selected1"
+        ng-options="value for value in values1"
+      ></select>
+      {{ selected1 }}
+      <button ng-click="selected1 = values1[0]">Select X</button>
+      <button ng-click="selected1 = values1[1]">Select Y</button>
+      <button ng-click="selected1 = values1[2]">Select Z</button>
+    </section>
+  </body>
+</html>
diff --git a/src/directive/options/options.js b/src/directive/options/options.js
@@ -12,6 +12,12 @@ import {
 
 const ngOptionsMinErr = minErr("ngOptions");
 
+/** @type {HTMLOptionElement} */
+const optionTemplate = document.createElement("option");
+
+/** @type {HTMLOptGroupElement} */
+const optGroupTemplate = document.createElement("optgroup");
+
 const NG_OPTIONS_REGEXP =
   /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?(?:\s+disable\s+when\s+([\s\S]+?))?\s+for\s+(?:([$\w][$\w]*)|(?:\(\s*([$\w][$\w]*)\s*,\s*([$\w][$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;
 // 1: value expression (valueFn)
@@ -34,6 +40,12 @@ export const ngOptionsDirective = [
    * @returns
    */
   function ($compile, $parse) {
+    /**
+     * @param {import('../../interface.ts').Expression} optionsExp
+     * @param {HTMLSelectElement} selectElement
+     * @param {import('../../core/scope/scope.js').Scope} scope
+     * @returns
+     */
     function parseOptionsExpression(optionsExp, selectElement, scope) {
       const match = optionsExp.match(NG_OPTIONS_REGEXP);
       if (!match) {
@@ -160,7 +172,9 @@ export const ngOptionsDirective = [
         }),
 
         getOptions() {
+          /** @type {Option[]} */
           const optionItems = [];
+          /** @type {Object.<string, Option>} */
           const selectValueMap = {};
 
           // The option values were already computed in the `getWatchables` fn,
@@ -211,23 +225,17 @@ export const ngOptionsDirective = [
       };
     }
 
-    // Support: IE 9 only
-    // We can't just ('<option>') since JQLite is not smart enough
-    // to create it in <select> and IE barfs otherwise.
-    const optionTemplate = document.createElement("option");
-    const optGroupTemplate = document.createElement("optgroup");
-
     /**
      *
      * @param {import("../../core/scope/scope.js").Scope} scope
      * @param {HTMLSelectElement} selectElement
-     * @param {*} attr
+     * @param {import("../../core/compile/attributes.js").Attributes} attr
      * @param {*} ctrls
      */
     function ngOptionsPostLink(scope, selectElement, attr, ctrls) {
       const selectCtrl = ctrls[0];
       const ngModelCtrl = ctrls[1];
-      const { multiple } = attr;
+      const multiple = attr["multiple"];
 
       // The emptyOption allows the application developer to provide their own custom "empty"
       // option when the viewValue does not match any of the option values.
@@ -254,7 +262,7 @@ export const ngOptionsDirective = [
 
       let options;
       const ngOptions = parseOptionsExpression(
-        attr.ngOptions,
+        attr["ngOptions"],
         selectElement,
         scope,
       );
@@ -313,14 +321,14 @@ export const ngOptionsDirective = [
         // If we are using `track by` then we must watch the tracked value on the model
         // since ngModel only watches for object identity change
         // FIXME: When a user selects an option, this watch will fire needlessly
-        // if (ngOptions.trackBy) {
-        //   scope.$watch(
-        //     () => ngOptions.getTrackByValue(ngModelCtrl.$viewValue),
-        //     () => {
-        //       ngModelCtrl.$render();
-        //     },
-        //   );
-        // }
+        if (ngOptions.trackBy) {
+          scope.$watch(
+            ngOptions.getTrackByValue(ngModelCtrl.$viewValue),
+            () => {
+              ngModelCtrl.$render();
+            },
+          );
+        }
       } else {
         selectCtrl.writeValue = function writeNgOptionsMultiple(values) {
           // The options might not be defined yet when ngModel tries to render
@@ -419,7 +427,12 @@ export const ngOptionsDirective = [
       // ------------------------------------------------------------------ //
 
       function addOptionElement(option, parent) {
-        const optionElement = optionTemplate.cloneNode(false);
+        /**
+         * @type {HTMLOptionElement}
+         */
+        const optionElement = /** @type {HTMLOptionElement} */ (
+          optionTemplate.cloneNode(false)
+        );
         parent.appendChild(optionElement);
         updateOptionElement(option, optionElement);
       }
diff --git a/src/directive/options/options.spec.js b/src/directive/options/options.spec.js
