AngularJS applikation

是时候创建一个真正的 AngularJS 应用程序了。

制作购物清单

让我们使用 AngularJS 的一些功能来制作一个购物清单，您可以在其中添加或删除商品：

我的购物清单
  • {{x}}×

{{errortext}}


应用程序说明

第 1 步：开始

首先创建一个名为 myShoppingList 的应用程序，并向其中添加一个名为 myCtrl 的控制器。

控制器将名为 products 的数组添加到当前的 $scope 中。

在 HTML 中，我们使用 ng-repeat 指令来显示使用数组中的项目的列表。

Eksempel

到目前为止，我们已经根据数组的项目创建了一个 HTML 列表：

<script>
var app = angular.module("minKøbsliste", []);
app.controller("minCtrl", function($scope) {
  $scope.produkter = ["mælk", "brød", "ost"];
});
</script>
<div ng-app="minKøbsliste" ng-controller="minCtrl">
  <ul>
    Nu kan vi tilføje varer til købslisten:
  </ul>
</div>

Prøv det selv

第 2 步：添加商品

在 HTML 中，添加一个文本字段，并使用 ng-model 指令将其绑定到应用程序。

Vi ønsker også at kunne fjerne varer fra købslisten. addItem 的函数，并使用 addMe 输入字段的值将商品添加到 products 数组中。

添加一个按钮，并为其指定一个 ng-click 指令，该指令将在单击该按钮时运行 addItem Funktion.

Eksempel

tilføjItem

<script>
var app = angular.module("minKøbsliste", []);
app.controller("minCtrl", function($scope) {
  $scope.produkter = ["mælk", "brød", "ost"];
  $scope.tilføjItem = function () {
    $scope.produkter.push($scope.tilføj);
  }
});
</script>
<div ng-app="minKøbsliste" ng-controller="minCtrl">
  <ul>
    Nu kan vi tilføje varer til købslisten:
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Tilføj</button>
</div>

Prøv det selv

<li ng-repeat="x i produkter">{{x}}</li>

3. Trin: Fjern varer

Vi ønsker også at kunne fjerne varer fra købslisten. fjernElement I kontroleren opretter vi en funktion ved navn

I HTML vil vi oprette en container for hver post og oprette en funktion, der bruger indekset til det ønskede element til at slette. <span> element, og giver det en ng-click instruktion, som bruger det aktuelle indeks kald fjernElement Funktion.

Eksempel

Nu kan vi fjerne varer fra købslisten:

<script>
var app = angular.module("minKøbsliste", []);
app.controller("minCtrl", function($scope) {
  $scope.produkter = ["mælk", "brød", "ost"];
  $scope.tilføjItem = function () {
    $scope.produkter.push($scope.tilføj);
  }
  $scope.fjernElement = function ($indeks) {
    $scope.produkter.splice($indeks, 1);
  }
});
</script>
<div ng-app="minKøbsliste" ng-controller="minCtrl">
  <ul>
    <li ng-repeat="x i produkter">
      {{x}}<span ng-click="fjernElement($indeks)×</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Tilføj</button>
</div>

Prøv det selv

4. Trin: Fejlhåndtering

Applikationen har nogle fejl, for eksempel, hvis du forsøger at tilføje den samme vare to gange, vil applikationen krasje. Desuden bør det ikke være muligt at tilføje tomme varer.

Vi løser dette ved at kontrollere værdien, før vi tilføjer en ny vare.

I HTML vil vi tilføje en container til fejlmeddelelser og skrive fejlmeddelelser, når nogen forsøger at tilføje en eksisterende vare.

Eksempel

Købsliste, kan skrive fejlmeddelelser:

<script>
var app = angular.module("minKøbsliste", []);
app.controller("minCtrl", function($scope) {
  $scope.produkter = ["mælk", "brød", "ost"];
  $scope.tilføjItem = function () {
    $scope.fejltekst = "";
    hvis (!$scope.tilføj) {return;}
    hvis ($scope.produkter.indexOf($scope.tilføj) == -1) {
      $scope.produkter.push($scope.tilføj);
    } ellers {
      $scope.fejltekst = "Denne vare findes allerede i din købsliste.";
    }
  }
  $scope.fjernElement = function ($indeks) {
    $scope.fejltekst = "";
    $scope.produkter.splice($indeks, 1);
  }
});
</script>
<div ng-app="minKøbsliste" ng-controller="minCtrl">
  <ul>
    <li ng-repeat="x i produkter">
      {{x}}<span ng-click="fjernElement($indeks)×</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Tilføj</button>
  <p>{{errortext}}</p>
</div>

Prøv det selv

Trin 5: Design

Applikationen kan køre, men bedre design kan bruges. Vi bruger W3.CSS stilark til at designe vores applikation.

Tilføj W3.CSS stilark og inkluder passende klasser i hele applikationen, resultatet vil være det samme som handlingslisten øverst på denne side.

Eksempel

Brug W3.CSS stilark til at designe din applikation:

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

Prøv det selv