AngularJS โปรแกรม

คำแนะนำหลักสูตร

ตอนนี้เป็นเวลาที่ควรสร้างโปรแกรม AngularJS แท้จริงแล้ว

ทำรายการซื้อของ

{{errortext}}

คำอธิบายโปรแกรม

ในขั้นที่ 1: เริ่มต้น myShoppingList และเพิ่มชื่อ ในโปรแกรม myCtrl

การควบคุมที่มีชื่อ products ของแนวความเพิ่มเข้า $scope ใน

ใน HTML เราใช้ ng-repeat คำสั่งเพื่อแสดงรายการที่ใช้โครงสร้างของแนวความ

ตัวอย่าง

จนถึงขณะนี้ เราได้สร้างรายการ HTML โดยตามโครงสร้างของแนวความ

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
});
</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 ค่าของฟิลด์ input จะเพิ่มสินค้าเข้า products ในแนวความ

เพิ่มปุ่มหนึ่งและกำหนด งาน ng-click คำสั่ง คำสั่งนี้จะทำงานเมื่อคลิกที่ปุ่มนี้ addItem ฟังก์ชัน。

ตัวอย่าง

ตอนนี้เราสามารถเพิ่มสินค้าเข้าตะกร้าซื้อของได้:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $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()">เพิ่ม</button>
</div>

ทดลองด้วยตัวเอง

ขั้นที่ 3: ลบสินค้า

เรายังต้องการที่จะลบสินค้าออกจากตะกร้าซื้อของได้

ในคอนโทรลเลอร์ สร้างฟังก์ชันชื่อ removeItem ฟังก์ชันที่จะลบสินค้าที่คุณต้องการลบ โดยใช้ index ของสินค้าที่ต้องการลบเป็นตัวอุปกรณ์

ใน HTML จะมีการสร้างโดเมนสำหรับแต่ละสินค้า <span> องค์ประกอบ งาน ng-click คำสั่ง，ซึ่งใช้สินค้าปัจจุบัน index ของสินค้าปัจจุบัน เรียก removeItem ฟังก์ชัน。

ตัวอย่าง

ตอนนี้เราสามารถลบสินค้าออกจากตะกร้าซื้อของได้:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $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()">เพิ่ม</button>
</div>

ทดลองด้วยตัวเอง

ขั้นที่ 4: การจัดการข้อผิดพลาด

โปรแกรมมีความผิดพลาดบางอย่าง เช่น ถ้าคุณพยายามเพิ่มสินค้าเดียวกันสองครั้ง โปรแกรมจะล่ม และไม่ควรอนุญาตให้เพิ่มสินค้าว่าง

เราจะแก้ปัญหาดังกล่าวด้วยการตรวจสอบค่าก่อนที่จะเพิ่มสินค้าใหม่

ใน HTML จะมีการเพิ่มโดเมนสำหรับข้อความข้อผิดพลาด และข้อความข้อผิดพลาดจะถูกเขียนเมื่อมีการพยายามเพิ่มสินค้าที่มีอยู่ในตะกร้าซื้อของ

ตัวอย่าง

ตะกร้าซื้อของ สามารถเขียนข้อความข้อผิดพลาดได้:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "该商品已经在您的购物清单中。";
    }
  }
  $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()">เพิ่ม</button>
  <p>{{errortext}}</p>
</div>

ทดลองด้วยตัวเอง

ขั้นที่ 5: ออกแบบ

โปรแกรมนี้สามารถทำงานได้ แต่สามารถใช้การออกแบบที่ดีขึ้นด้วย พวกเราใช้ตารางสไตล์ W3.CSS ในการออกแบบโปรแกรมของเรา

เพิ่มตารางสไตล์ W3.CSS และใช้คลาสที่เหมาะสมทั่วโปรแกรม ผลลัพธ์จะเหมือนตารางสินค้าด้านบนของหน้านี้

ตัวอย่าง

ใช้ตารางสไตล์ W3.CSS ในการออกแบบโปรแกรมของคุณ:

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

ทดลองด้วยตัวเอง