Application ng AngularJS

Ito na ang panahon na gumawa ng tunay na AngularJS application.

Gumawa ng Shopping List

Higit pa, gamitin natin ang ilang mga function ng AngularJS upang gumawa ng shopping list kung saan magagamit ang pagdagdag at pagbubuwag ng produkto:

Aking Shopping List
  • {{x}}×

{{errortext}}


Paglalarawan ng Application

Unang hakbang: Magsimula

Una, lumikha ng isang na may pangalan na myShoppingList ng application, at magdagdag ng isang na may pangalan na myCtrl ng controller.

ang controller na products na array ay idinagdag sa kasalukuyang $scope sa

Sa HTML, gumagamit kami ng ng-repeat utos upang ipakita ang listahan gamit ang mga proyekto ng array.

Example

Sa ngayon, nagsagawa na kami ng isang HTML listahan sa pamamagitan ng mga proyekto ng array:

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

Subukan Ngayon

Ikalawa: Magdagdag ng produkto

Sa HTML, magdagdag ng isang text field at gamitin ng-model binindtan sa application.

在控制器中，创建一个名为 addItem function, at gamitin ang utos upang addMe Ang halaga ng input na field ay magadagdag ng produkto sa products sa array.

Magdagdag ng isang button, at magtatalaga ng isang ng-click Mga utos, ang utos na ito ay magpapatatakbo kapag inilagay ang click sa button. addItem 函数。

Example

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

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

Subukan Ngayon

第 3 步：删除商品

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

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

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

Example

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

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

Subukan Ngayon

第 4 步：错误处理

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

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

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

Example

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

<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()">Magdagdag</button>
  <p>{{errortext}}</p>
</div>

Subukan Ngayon

Ika-5 Mga Hakbang: Disenyo

Ang application na ito ay maaaring pataasin, ngunit maaaring magamit ang mas mahusay na disenyo. Ginagamit namin ang W3.CSS Stylesheet upang disenyo ang aming application.

Magdagdag ng W3.CSS Stylesheet at ilagay ang magandang klase sa buong application, ang resulta ay magiging katulad ng shopping list sa itaas ng pahina.

Example

Gamitin ang W3.CSS Stylesheet upang disenyo ang iyong application:

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

Subukan Ngayon