在 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>
輸出：
在這個例子中，我們寫了一些國家的列表，主要使用了 ng-repeat。它用於在表格、列表或其他 UI 元件中顯示資料。
此外，它易於使用、直觀並提供許多自定義。最後，在 Angular 核取方塊列表中，你可以輕鬆新增或刪除專案而不會破壞整個程式碼；它使列表靈活地滿足你的需求。
點選這裡檢視上面程式碼的演示。
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