AngularJS 中的下拉選單

1. AngularJS 中下拉選單的基本 HTML 語法
2. 在 AngularJS 中使用 ng-options 屬性建立下拉選單
3. 在 AngularJS 中使用 ng-repeat 屬性建立下拉選單
4. AngularJS 中 ng-options 和 ng-repeat 屬性之間的區別
5. まとめ

AngularJS 是一個用於構建 Web 應用程式的 JavaScript 框架。AngularJS 提供資料繫結和依賴注入，從而減少了手動編寫程式碼的需要。

本文展示了使用 AngularJS 建立下拉選單的方法。讓我們開始。

AngularJS 中下拉選單的基本 HTML 語法

在深入主題之前，讓我們先了解一下 Angular 中下拉框的基本概念。

下拉選單是一種選擇選單，使用者可以在其中從列表中選擇一個專案。它也稱為組合框或下拉選單。

主要是通過點選標題或 > 按鈕來開啟和關閉選單。選擇元素或列表項用於將下拉框新增到網站頁面。我們必須將第一個 <option> 標記中的首選選項設定為所選元素中的所需值。

讓我們看一下基本的 HTML 語法。

<dropdown placeholder="Cars" list="Cars" selected="Black Car" property="Model"></dropdown>

上面的語法是我們如何使用下拉選單的示例。在使用者選擇任何內容之前，佔位符引數指定要顯示的文字。

Cars 變數是指你希望出現在列表中的專案列表，它與 property 變數結合使用，該變數指定應向使用者顯示覆雜 JavaScript 列表物件中的哪個屬性。最後，selected 屬性將指定的值儲存在父控制器上。

在 AngularJS 中，ng-options 屬性和 ng-repeat 屬性是常用來建立下拉選單的兩種方法。

在 AngularJS 中使用 ng-options 屬性建立下拉選單

ng-options 指令是一個 AngularJS 構造，它建立一個帶有選擇選項的下拉選單。只有在 SELECT 控制元件應成為頁面模板的一部分時，才應使用此指令。

ng-options 屬性具有一個開始和結束標記以及一個由兩個或多個物件組成的陣列，這些物件表示該特定選項組的選項。

每個物件都包含兩個屬性：第一個是將出現在輸入欄位中的文字，第二個是具有其他引數的物件，這些引數控制此選項的行為方式。

該指令的示例如下。

<div ng-app="demo" ng-controller="myCtrl">

<select ng-model="Options" ng-options="Names">

 </select>

   </div>  

  <script>

 var app = angular.module('demo', []);

 app.controller('myteam', function($scope) {

 $scope.names = ["Dan", "John", "Smith"];

 });

 </script>

在 AngularJS 中使用 ng-options 建立下拉選單的限制

ng-options 屬性是 Angular 中動態選項列表的絕佳指令。ng-options 屬性有助於在選擇列表中顯示一系列選項。但是，它確實有一些限制。

限制之一是 ng-options 與使用 ng-repeat 指令的其他 Angular 元件不相容。如果你想將 ng-repeat 與另一個元件一起使用，你必須編寫程式碼以在列表中生成一個專案。

如果你不知道幕後發生的事情，此限制可能會使你的程式碼難以維護和理解。

在 AngularJS 中使用 ng-repeat 屬性建立下拉選單

AngularJS 中的 ng-repeat 指令允許你為要迭代的集合中的每個物件重複一個 HTML 元素。

我們可以使用 ng-repeat 指令來建立專案列表，例如，填充下拉選單。ng-repeat 指令迴圈遍歷所有指定的陣列或物件元素，並根據使用的 HTML 屬性為每個找到的物件建立更多 DOM 元素。

要了解有關 Angular 下拉選單的更多資訊，請單擊此處。

該指令的示例如下所示。

<div ng-app="Sample" ng-controller="Testing">
<select>

 <option ng-repeat="Name">{{name}}</option>

 </select>

 </div>

  <script>

 var app = angular.module('Sample', []);

 app.controller('Testing', function($scope) {

 $scope.names = ["Rockstar", "Dan", "Patrick", "Han", "Jordan","John"];

 });

 </script>

在 AngularJS 中使用 ng-repeat 建立下拉選單的限制

• 定義列表項時只能使用一個變數，必須是陣列或物件。這意味著我們不能在迴圈中動態新增和刪除專案，也不能將任何其他資料傳遞給 ng-repeat。
• 索引由 AngularJS 自動生成，這意味著我們無法控制生成的數字。要克服此限制，你必須在每次從列表中新增或刪除新專案時手動更改索引號。

AngularJS 中 ng-options 和 ng-repeat 屬性之間的區別

如果所選選項不可用，ng-options 指令會顯示一個選擇框。它建立所有可能值的列表。

另一方面，ng-repeat 指令建立一個包含所有可能值的陣列以供選擇。

此外，使用 ng-options 建立的下拉選單可以將物件作為選定值，而使用 ng-repeat 建立的下拉選單必須將字串作為選定值。

點選這裡如果你想了解更多關於 ng-options 和 ng-repeat 的資訊。

まとめ

這篇文章為我們提供了很多關於在 AngularJS 中建立下拉選單的資訊。我們學會了在 AngularJS 中建立下拉選單、實現它們並開始使用它們。

點選這裡檢視上面提到的程式碼。