在 AngularJS 中建立一個核取方塊列表

Muhammad Adil 2022年4月20日
在 AngularJS 中建立一個核取方塊列表

本教程將演示在 AngularJS 中建立一個簡單的核取方塊列表。我們將使用 ng-repeat 指令來遍歷包含名為 selected 的屬性的物件陣列。

我們還將使用 ng-model 將陣列中每個物件的選定屬性繫結到核取方塊輸入。

建立 Angular 核取方塊列表的步驟

以下步驟將指導你建立一個 Angular 核取方塊列表。

  • 建立一個新的 AngularJS 專案。
  • 將資料新增到控制器。
  • 將列表項新增到控制器並新增 ng-repeat 指令。
  • 將核取方塊列表新增到 HTML 檔案並新增 ng-model 指令。
  • 建立一個函式,該函式將遍歷控制器中的專案並檢查它們是否被選中,然後相應地顯示或隱藏它們。

讓我們討論一個可以幫助我們建立 Angular 核取方塊列表的示例。

我們需要建立一個開發環境來開始構建 Angular 應用程式。為此,我們將在我們的系統上全域性安裝 NodeJS 和 Angular CLI 工具。

為此,請執行以下命令。

$ng new angular-checkbox-list-app

在此之後,讓我們編寫 JavaScript 和 HTML 程式碼。

JavaScript 程式碼:

angular.module('sam', ['checklist-model'])
    .controller('demo', function($scope) {
        $scope.countryList = [
            { name: 'America'},
            { name: 'England'},
            { name: 'Canada'},
            { name: 'Scotland'}
        ];
        $scope.selected = {
            country: []
        };
    });

HTML 程式碼:

<div ng-app="sam">
    <div ng-controller="demo">
    <h2>
    Example of Angular Checkbox List
    </h2>
        <label ng-repeat="country in countryList"><input type="checkbox" checklist-model="selected.country" checklist-value="country" /> {{country.name}}<br/> </label>
        <br/>
        <p>
        Selection will show here
        </p>
        {{selected.country}}
	</div>
</div>

輸出:

Angular 簡單核取方塊列表

在這個例子中,我們寫了一些國家的列表,主要使用了 ng-repeat。它用於在表格、列表或其他 UI 元件中顯示資料。

此外,它易於使用、直觀並提供許多自定義。最後,在 Angular 核取方塊列表中,你可以輕鬆新增或刪除專案而不會破壞整個程式碼;它使列表靈活地滿足你的需求。

點選這裡檢視上面程式碼的演示。

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相關文章 - Angular List