AngularJS Application

ມັນເກີດຂຶ້ນເວລາທີ່ພວກເຮົາຈະສ້າງຄອມພິວເຕີ້ AngularJS ທີ່ແທ້ຈິງ

ສ້າງລາຍການສິນຄ້າ

ພວກເຮົາຈະໃຊ້ບາງພາກສ່ວນຂອງ AngularJS ເພື່ອສ້າງລາຍການສິນຄ້າທີ່ທ່ານສາມາດເພີ່ມຫລືຫຼຸດສິນຄ້າ

ລາຍການສິນຄ້າຂອງຂ້ອຍ
  • {{x}}×

{{errortext}}


ຄວາມຊື່

ບັນດາວັນນາທິບາຍອີກ

ກ່ອນນັ້ນພວກເຮົາໄດ້ສ້າງ 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>
    addItem
  </ul>
</div>

ທ້າທາຍຄັ້ງຫນັງ

ບັນດາບາງວັນນາທິບາຍອີກ

ໃນ HTML ພາສາຂອງພວກເຮົາຈະເພີ່ມບັນນາທິບາຍຫນື່ງແລະຈະໃຊ້ ng-model ຄຳສັ່ງນີ້ຈະຫນຸງຢູ່ຢູ່ຕໍ່ກັບຄອມພິວເຕີ້

ການທີ 3: ການຖອນວັດຖຸ addItem ພາສາຂອງຫນື່ງ addMe ຄູ່ມູນຂອງບັນນາທິບາຍຈະສະເໜີສິນຄ້າເຂົ້າໃນ products ໃນອາວຸດ

ສະເໜີບັນຊີຫນື່ງແລະຈະແຈກຕັ້ງ ສະເພາະ ຄຳສັ່ງນີ້ຈະເລີ່ມໃຊ້ໃນຄະນະທີ່ຄີກົດຂັ້ນນັ້ນ 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>
    addItem
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">ຕິດຕັ້ງ</button>
</div>

ທ້າທາຍຄັ້ງຫນັງ

ປັດຈຸບັນພວກເຮົາສາມາດເພີ່ມວັດຖຸເຂົ້າໃນບັນຊີວິດຊຸມນຸມອອກໄດ້：

<li ng-repeat="x in products">{{x}}</li>

ການທີ 3: ການຖອນວັດຖຸ removeItem ພວກເຮົາຍັງຫວັງວ່າຈະສາມາດຖອນວັດຖຸຈາກບັນຊີວິດຊຸມນຸມອອກໄດ້。

ພວກເຮົາຈະອອກກອງການພາຍໃນຄວາມຄວນກວນຄັນຂອງພວກເຂົາທີ່ມີຊື່ວ່າ ໃນ HTML ພວກເຮົາຈະເພີ່ມບ່ອນລວມວັດຖຸທີ່ພວກເຂົາຕ້ອງຖອນອອກໄດ້ໃຫ້ກັບບ່ອນລວມວັດຖຸທີ່ມີຢູ່ໃນ HTML。 <span> ສະເພາະ ng-click ຄຳສັ່ງ，ທີ່ໃຊ້ຄູ່ຄັນສະເພາະ ເອິ້ນ 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 CSS ເພື່ອອອກແບບຂະບວນການຂອງພວກເຮົາ.

ຕິດຕັ້ງ W3.CSS CSS ແລະກວດສະຍາການວິທະຍາສາດພິເສດຂອງລາວໃນຂະບວນການຂອງລາວທັງໝົດ, ຜົນຈະຕາມກັບອາກາດບໍລິສັດທີ່ສະບາຍອາກາດຂອງລາວທີ່ສະບາຍອາກາດຂອງລາວທີ່ສະບາຍອາກາດຂອງລາວ.

ບົດສະຫຼຸບ

ນຳໃຊ້ W3.CSS CSS ສະໜອງຂອງລາວເພື່ອການອອກແບບຂອງລາວຄວນຕິດຕັ້ງກັບຂະບວນການອາລາຍທີ່ສະບາຍອາກາດຂອງລາວ:

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

ທ້າທາຍຄັ້ງຫນັງ