Question

我一直在编写使用ng-if的代码，如果数组为空（[]）则显示带有消息的div。 ng-if不显示div，即使我有console.log数组，它显示为空。

我仍然是angularjs的新手，所以我不确定我是否正确使用ng-if指令。这是我的代码，有什么帮助，谢谢！

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>

Answer 1

您应该以这种方式使用ng-if（对于数组）：

Bitmap bitmap = getDrawingCache();
Bitmap output = Bitmap.createBitmap(/*width, height, bla bla bla*/);
Canvas canvas = new Canvas(output);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
Rect srcRect = new Rect(0,0,bitmap.getWidth(), bitmap.getHeight());
Rect destRect = new Rect(0,0,output.getWidth(), output.getHeight());
canvas.drawBitmap(bitmap, srcRect, destRect, paint);

这将在列表为空时显示消息。

如果你这样做：

<div ng-if="!bought.data.length">Nothing bought yet.</div>

您正在将buy.shoppingList数组与新的空数组进行比较，然后它将返回false。

Angular 1 ng - 如果不显示div

1 个答案: