AngularJS အောက်ပိုင်း
是时候创建一个真正的 AngularJS 应用程序了。
制作购物清单
让我们使用 AngularJS 的一些功能来制作一个购物清单，您可以在其中添加或删除商品：
应用程序说明
第 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>
{{x}}
亲自试一试
第 2 步：添加商品
在 HTML 中，添加一个文本字段，并使用 ng-model 指令将其绑定到应用程序。
在控制器中，创建一个名为 addItem 的函数，并使用 addMe 输入字段的值将商品添加到 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>
{{x}}
亲自试一试
第 3 步：删除商品
我们还希望能够从购物清单中删除商品。
在控制器中，创建一个名为 removeItem 的函数，该函数将您想要删除的项目的索引作为参数。
在 HTML 中，为每个项目创建一个 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>
亲自试一试
第 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>
{{errortext}}
亲自试一试
第 5 步：设计
该应用程序可以运行，但可以使用更好的设计。我们使用 W3.CSS 样式表来设计我们的应用程序。
添加 W3.CSS 样式表，并在整个应用程序中包含适当的类，结果将与本页顶部的购物清单相同。
实例
使用 W3.CSS 样式表来设计您的应用程序：
亲自试一试
