Aplikasi AngularJS

Waktu untuk membuat aplikasi AngularJS yang sebenarnya.

Buat daftar belanja

Berikan beberapa fungsi AngularJS untuk membuat daftar belanja, di mana Anda dapat menambahkan atau menghapus produk:

Daftar belanja saya
  • {{x}}×

{{errortext}}


Keterangan aplikasi

Langkah ke 1: Mulai

pertama-tama buat nama myShoppingList aplikasi, dan tambahkan nama myCtrl dalam

Kontrol yang dinamai products mengTambahkan array ke kontrol yang saat ini. $scope dalam.

Di HTML, kami menggunakan ng-repeat instruksi untuk menampilkan daftar item yang digunakan di dalam array.

Contoh

Sampai saat ini, kami telah membuat daftar HTML yang dibuat berdasarkan item array:

<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>

Cuba Sendiri

Langkah ke 2: Tambahkan produk

Di HTML, tambahkan sebuah bidang teks dan gunakan ng-model instruksi untuk menghubungkannya ke aplikasi.

在控制器中，创建一个名为 addItem fungsi, dan gunakan addMe Nilai input bidang akan menambahkan produk ke products di dalam array.

Tambahkan sebuah tombol, dan tentukan ng-click Instruksi, instruksi ini akan dijalankan saat tombol ini diklik addItem 函数。

Contoh

现在我们可以将商品添加到购物清单中：

<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()">Tambah</button>
</div>

Cuba Sendiri

第 3 步：删除商品

我们还希望能够从购物清单中删除商品。

在控制器中，创建一个名为 removeItem 的函数，该函数将您想要删除的项目的索引作为参数。

在 HTML 中，为每个项目创建一个 <span> 元素，并为其提供一个 ng-click 指令，该指令使用当前 $index 调用 removeItem 函数。

Contoh

现在我们可以从购物清单中删除商品：

<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()">Tambah</button>
</div>

Cuba Sendiri

第 4 步：错误处理

该应用有一些错误，例如，如果您尝试两次添加相同的商品，该应用就会崩溃。另外，也不应该允许添加空商品。

我们将通过在添加新商品前检查值来解决这个问题。

在 HTML 中，我们将添加一个用于错误消息的容器，并在有人尝试添加现有商品时编写错误消息。

Contoh

购物清单，可以写入错误消息：

<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 = "商品已经存在于您的购物清单中。";
    }
  }
  $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()">Tambah</button>
  <p>{{errortext}}</p>
</div>

Cuba Sendiri

Langkah ke 5: Rancang

Aplikasi ini boleh berjalan, tetapi boleh digunakan untuk rancangan yang lebih baik. Kami menggunakan Tabel Gaya W3.CSS untuk merancang aplikasi kami.

Tambahkan Tabel Gaya W3.CSS dan termasuk kelas yang sesuai di seluruh aplikasi, hasilnya akan sama seperti daftar belanja di atas halaman ini.

Contoh

Gunakan Tabel Gaya W3.CSS untuk merancang aplikasi anda:

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

Cuba Sendiri