มันเป็นเวลาที่จะสร้างโปรแกรมประยุกต์ AngularJS จริง
ทำให้รายการช้อปปิ้ง
ช่วยให้ใช้บางส่วนของคุณสมบัติ AngularJS ที่จะทำให้รายการช้อปปิ้งอยู่ที่คุณสามารถเพิ่มหรือลบรายการ:
รายการช้อปปิ้งของฉัน
- {{X}} ×
{{}} errortext
แอพลิเคชันอธิบาย
ขั้นตอนที่ 1. เริ่มต้น:
เริ่มต้นด้วยการทำโปรแกรมที่เรียกว่า myShoppingList และเพิ่มชื่อตัวควบคุมเป็น myCtrl กับมัน
ควบคุมการเพิ่มอาร์เรย์ชื่อ products ในปัจจุบัน $scope
ใน HTML เราจะใช้ ng-repeat คำสั่งเพื่อแสดงรายการโดยใช้รายการในอาร์เรย์ที่
ตัวอย่าง
จนถึงขณะนี้เราได้ทำรายการ HTML ขึ้นอยู่กับรายการของอาร์เรย์:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
ลองตัวเอง» ขั้นตอนที่ 2. รายการที่เพิ่ม:
ใน HTML เพิ่มฟิลด์ข้อความและผูกให้แอพลิเคชันที่มี ng-model คำสั่ง
ในการควบคุมให้ฟังก์ชั่นที่มีชื่อว่า addItem และใช้ค่าของ addMe ช่องใส่เพื่อเพิ่มรายการไปยัง products อาร์เรย์
เพิ่มปุ่มและให้มัน ng-click คำสั่งที่จะเรียกใช้ addItem ฟังก์ชั่นเมื่อมีการคลิกปุ่ม
ตัวอย่าง
ตอนนี้เราสามารถเพิ่มรายการในรายการช้อปปิ้งของเรา:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
ลองตัวเอง» ขั้นตอนที่ 3 รายการออก:
นอกจากนี้เรายังต้องการที่จะสามารถลบรายการจากรายการช้อปปิ้ง
ในการควบคุมให้ฟังก์ชั่นที่มีชื่อว่า removeItem ซึ่งใช้ดัชนีของรายการที่คุณต้องการที่จะลบที่เป็นพารามิเตอร์
ใน HTML ให้ <span> องค์ประกอบสำหรับแต่ละรายการและให้พวกเขามี ng-click สั่งที่เรียก removeItem ฟังก์ชั่นกับปัจจุบัน $index
ตัวอย่าง
ตอนนี้เราสามารถเอารายการออกจากรายการช้อปปิ้งของเรา:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
$scope.removeItem = function (x) {
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">
{{x}}
<span ng-click="removeItem($index)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
ลองตัวเอง» ขั้นตอนที่ 4. การจัดการข้อผิดพลาด:
โปรแกรมประยุกต์ที่มีข้อผิดพลาดบางอย่างเช่นถ้าคุณพยายามที่จะเพิ่มรายการเดียวกันสองครั้งโปรแกรมล่ม นอกจากนี้ก็ไม่ควรได้รับอนุญาตให้เพิ่มรายการที่ว่างเปล่า
เราจะแก้ไขปัญหาว่าด้วยการตรวจสอบค่าก่อนที่จะเพิ่มรายการใหม่
ใน HTML เราจะเพิ่มภาชนะข้อความผิดพลาดและเขียนข้อความแสดงข้อผิดพลาดเมื่อมีคนพยายามที่จะเพิ่มรายการที่มีอยู่
ตัวอย่าง
รายการช้อปปิ้งที่มีความเป็นไปได้ที่จะเขียนข้อความผิดพลาด:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe)
== -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already
in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">
{{x}}
<span ng-click="removeItem($index)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>
ลองตัวเอง» ขั้นตอนที่ 5 การออกแบบ:
การประยุกต์ใช้งาน แต่จะใช้การออกแบบที่ดีกว่า เราใช้สไตล์ชีต W3.CSS ได้ตามสไตล์ของโปรแกรมของเรา
เพิ่มสไตล์ชีท W3.CSS และรวมถึงชั้นเรียนที่เหมาะสมตลอดทั้งโปรแกรมและผลจะเป็นเช่นเดียวกับรายการช้อปปิ้งที่ด้านบนสุดของหน้านี้
ตัวอย่าง
สไตล์แอพลิเคชันของคุณโดยใช้สไตล์ชีต W3.CSS นี้:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
ลองตัวเอง»