0
Ich habe einen Code geschrieben, der ng-if verwendet, um ein div mit einer Nachricht anzuzeigen, wenn ein Array leer ist ([]). Das ng-if zeigt nicht das div an, obwohl ich console.log das Array habe und es erscheint leer.Angular 1 ng - wenn nicht div angezeigt
Ich bin noch neu bei angularjs, also bin ich mir nicht sicher, ob ich die ng-if-Anweisung richtig verwende. Hier ist mein Code, alles hilft, danke!
js:
(function() {
'use strict';
var data = [];
var shoppingList = [
{
name: "Donuts",
quantity: "10"
},
{
name: "Cookies",
quantity: "10"
},
{
name: "Drinks",
quantity: "10"
},
{
name: "Shrimp",
quantity: "10"
},
{
name: "Ice Cream tub",
quantity: "100"
}
];
console.log(data);
angular.module('shoppingListCheckOffApp', [])
.controller('toBuyListController', toBuyListController)
.controller('boughtListController', boughtListController)
.service('shoppingListService', shoppingListService);
toBuyListController.$inject = ['shoppingListService'];
function toBuyListController(shoppingListService){
var buy = this;
buy.shoppingList = shoppingList;
buy.shoppingListBought = function(itemIndex){
shoppingListService.dataTransfer(buy.shoppingList[itemIndex].name, buy.shoppingList[itemIndex].quantity);
shoppingListService.remove(itemIndex);
};
}
boughtListController.inject = ['shoppingListService'];
function boughtListController(shoppingListService){
var bought = this;
bought.data = shoppingListService.getData();
console.log(bought.data);
}
function shoppingListService(){
var service = this;
service.dataTransfer = function(itemName, quantity){
var item = {
name: itemName,
quantity: quantity
};
data.push(item);
}
service.remove = function (itemIndex) {
shoppingList.splice(itemIndex, 1);
};
service.getData = function() {
return data;
};
};
})();
html:
<!doctype html>
<html ng-app="shoppingListCheckOffApp">
<head>
<title>Shopping List Check Off</title>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div>
<h1>Shopping List Check Off</h1>
<div>
<!-- To Buy List -->
<div ng-controller="toBuyListController as buy">
<h2>To Buy:</h2>
<ul>
<li ng-repeat="item in buy.shoppingList">Buy {{item.quantity}} {{item.name}}(s)<button ng-click="buy.shoppingListBought($index);" ng-click="myVar = true"><span></span> Bought</button></li>
</ul>
<div ng-if ="buy.shoppingList === []">Everything is bought!</div>
</div>
<!-- Already Bought List -->
<div ng-controller="boughtListController as bought">
<h2>Already Bought:</h2>
<ul>
<li ng-repeat="item in bought.data">Bought {{item.quantity}} {{item.name}}(s)</li>
</ul>
<div ng-if="bought.data === []">Nothing bought yet.</div>
</div>
</div>
</div>
</body>
</html>