진짜 AngularJS와 응용 프로그램을 만들 수있는 시간입니다.
쇼핑 목록을 확인
쇼핑 목록을 만들기 위해 AngularJS와 기능의 일부를 사용할 수 있습니다, 당신은 항목을 추가하거나 제거 할 수 있었다 :
내 쇼핑 목록
- {{X}} ×
{{ERRORTEXT}}
응용 프로그램 설명
1 단계 시작하기
라는 응용 프로그램하여 시작 myShoppingList 하고라는 이름의 컨트롤러 추가 myCtrl 여기에 있습니다.
컨트롤러라는 배열 추가 products 은 현재까지 $scope .
표시되는 HTML에서는 사용 ng-repeat 배열의 항목을 사용하여리스트를 표시하도록 지시한다.
예
지금까지 배열의 항목에 기초하여 HTML리스트를 만들었다 :
<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>
»그것을 자신을 시도 2 단계 추가 항목 :
표시되는 HTML에서 텍스트 필드를 추가하고, 사용하여 애플리케이션에 바인딩 ng-model 지시자.
컨트롤러에서라는 함수 만들 addItem 하고,의 값 사용 addMe 에 항목을 추가 입력 필드를 products 배열입니다.
버튼을 추가하고 그에게 줄 ng-click 실행됩니다 지시 addItem 버튼을 클릭 할 때 기능.
예
이제 우리는 우리의 쇼핑 목록에 항목을 추가 할 수 있습니다 :
<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()">Add</button>
</div>
»그것을 자신을 시도 3 단계 제거 항목 :
우리는 또한 쇼핑 목록에서 항목을 제거 할 수 있어야합니다.
컨트롤러에서라는 함수 만들 removeItem 있었던 파라미터로 제거 할 항목의 인덱스를 가져 오며,
되는 HTML에서, 확인 <span> 각 항목에 대한 요소를 그들에게 제공 ng-click 부르는 지시 removeItem 현재와 기능 $index .
예
이제 우리는 우리의 쇼핑 목록에서 항목을 제거 할 수 있습니다 :
<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()">Add</button>
</div>
»그것을 자신을 시도 4 단계 오류 처리 :
당신이 두 응용 프로그램이 충돌을 같은 항목을 추가하려고하면 같은 응용 프로그램은, 약간의 오차가 있습니다. 또한, 빈 항목을 추가 할 수 없습니다해야합니다.
우리는 새 항목을 추가하기 전에 값을 확인하여 해당 문제를 해결합니다.
되는 HTML에서, 우리는 오류 메시지에 대한 컨테이너를 추가하고, 사람이 기존 항목을 추가하려고 할 때 오류 메시지를 기록합니다.
예
오류 메시지를 기록 할 수있는 가능성을 가진 쇼핑 목록 :
<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 = "The item is already
in your shopping list.";
}
}
$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()">Add</button>
<p>{{errortext}}</p>
</div>
»그것을 자신을 시도 5. 설계 단계 :
응용 프로그램이 작동하지만, 더 나은 디자인을 사용할 수 있습니다. 우리는 우리의 응용 프로그램의 스타일을 위해 W3.CSS 스타일 시트를 사용합니다.
W3.CSS 스타일 시트를 추가하고 포함 적절한 클래스를 응용 프로그램 전반에 걸쳐, 그 결과는이 페이지 상단의 쇼핑 목록과 동일합니다.
예
W3.CSS 스타일 시트를 사용하여 응용 프로그램을 스타일 :
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
»그것을 자신을 시도