Question

我有一个存储在数组中的对象列表，我有一个按钮可以从该数组中删除项目并插入另一个数组中，但我只知道如何删除和单独添加。

我很难理解何时调用函数，如果需要参数，是否传递或返回哪些值。例如，add函数有2个参数来插入对象值，但我不知道如何在单击并删除后调用该函数，它不更新的数组，在删除第一个之前获取初始值列表。

首先，我需要了解它是如何工作的，删除索引并获取此索引并插入另一个列表。

我不知道工厂或服务是如何工作的，只知道它是如何访问控制器之间的功能的

阵列

var items = [];

  var boughtitems = [];


service.displayItem = function(itemName, itemquantity) {
   items.push({name: "apple", quantity: 2}, {name: "strawberry", quantity: 10},
              {name: "grape", quantity: 5}, {name: "orange", quantity: 6}, {name: "lemon", quantity: 4});
 }

如何在删除或获取删除的项目后插入或调用add函数并插入另一个数组？

它正在使用该功能添加和删除：

service.addItem = function (itemName, quantity) {
    if ((maxItems === undefined) ||
        (maxItems !== undefined) && (items.length < maxItems)) {
      var item = {
        name: itemName,
        quantity: quantity
      };
      items.push(item);
    }
    else {
      throw new Error("Max items (" + maxItems + ") reached.");
    }
  };

  service.removeItem = function (itemIndex) {
    items.splice(itemIndex, 1);
  };

这样可行，但我不知道如何在视图中显示并且不添加第一项。该函数位于Add in buyitems数组中：

{name: "strawberry", quantity: 10},
              {name: "grape", quantity: 5}, {name: "orange", quantity: 6}



service.addList = function (itemIndex) {
    items.splice(itemIndex, 1);
    //console.log(boughtitems);
    boughtitems.splice(0,0,items[itemIndex]);
return boughtitems;
    console.log(boughtitems);
 };

＆＃13;

(function () {
'use strict';

angular.module('ShoppingListCheckOff', [])
.controller('ToBuyController', ToBuyController)
.controller('AlreadyBoughtController', AlreadyBoughtController)
.service('ShoppingListCheckOffService', ShoppingListCheckOffService);

// LIST #1 - controller
ToBuyController.$inject = ['ShoppingListCheckOffService'];
function ToBuyController(ShoppingListCheckOffService) {
  var list1 = this;

  // Use factory to create new shopping list service
  var shoppingList = ShoppingListCheckOffService();

  list1.items = shoppingList.getItems();

  list1.itemName = "";
  list1.itemQuantity = "";

  shoppingList.displayItem(list1.itemName, list1.itemQuantity);

  list1.addList = function (itemIndex) {
    shoppingList.addList(itemIndex);
  };
}


// LIST #2 - controller
AlreadyBoughtController.$inject = ['ShoppingListCheckOffService'];
function AlreadyBoughtController(ShoppingListCheckOffService) {
  var list2 = this;

  // Use factory to create new shopping list service
  var shoppingList = ShoppingListCheckOffService(5);

   list2.boughtitems = shoppingList.getItems2();

   list2.itemName = "";
   list2.itemQuantity = "";

   shoppingList.displayItem2(list2.itemName, list2.itemQuantity);
   //list1.addList = function (itemIndex) {
    // shoppingList.addList(itemIndex);
  // };

   list2.addList = function (itemIndex) {
     shoppingList.addList(itemIndex, 1);
  };
  //
  // list2.removeItem = function (itemIndex) {
  //   shoppingList.removeItem(itemIndex);
  // };
}


// If not specified, maxItems assumed unlimited
function ShoppingListService(maxItems) {
  var service = this;

  // List of shopping items
  var items = [];

  var boughtitems = [];

 service.displayItem = function(itemName, itemquantity) {
   items.push({name: "apple", quantity: 2}, {name: "strawberry", quantity: 10},
              {name: "grape", quantity: 5}, {name: "orange", quantity: 6}, {name: "lemon", quantity: 4});
 }

 service.displayItem2 = function(itemName, itemquantity) {
  //    boughtitems.push(items);
  if ((maxItems === undefined) ||
     (maxItems !== undefined) && (boughtitems.length < maxItems)) {
      var item = {
       name: itemName,
       quantity: itemquantity
      };
     boughtitems.push(items);
     return boughtitems;
    }
    else {
      throw new Error("Max items (" + maxItems + ") reached.");
    }
   console.log(boughtitems);
 }

  service.removeList = function (itemIndex) {
      items.splice(itemIndex, 1);
  };



 service.addList = function (itemIndex) {
    items.splice(itemIndex, 1);
    //console.log(boughtitems);
    boughtitems.splice(0,0,items[itemIndex]);
return boughtitems;
    console.log(boughtitems);
 };

  service.getItems = function () {
    return items;
  };

  service.getItems2 = function () {
        return boughtitems;
  };

}


function ShoppingListCheckOffService() {
  var factory = function (maxItems) {
    return new ShoppingListService(maxItems);
  };

  return factory;
}

})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en" ng-app='ShoppingListCheckOff'>
  <head>
    <title>Shopping List Check Off</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <link rel="stylesheet" href="styles/styles.css">
  </head>
<body>
  <div class="container">
  <h1>Shopping List Check Off</h1>
  <!-- LIST #1 - unlimited items -->
    <h3>Shopping List #1</h3>
    <input type="text" ng-model="list1.itemName" placeholder="item name">
    <input type="text" ng-model="list1.itemQuantity" placeholder="quantity">
    <button ng-click="list1.addItem();">Add Item</button>
    <div class="error">Error: {{list1.errorMessage}}</div>
  <div class="row">
    <!-- To Buy List -->
    <div id="list1" ng-controller='ToBuyController as list1'>
      <div class="col-md-6">
       <h2>To Buy:</h2>
       <ul>
         <li ng-repeat="item in list1.items"> Buy {{ item.quantity }} {{ item.name }}s
            <button ng-click="list1.addList($index);" class="btn btn-default">
              <span class="glyphicon glyphicon-ok"></span> Bought</button></li>
         </li>
       </ul>
       <div class="emptyMessage">Everything is bought!</div>
      </div>
      <!-- Already Bought List -->
      <div class="col-md-6">
       <!-- LIST #2 -->
       <div id="list2" ng-controller='AlreadyBoughtController as list2'>
         <h2>Already Bought:</h2>
       <ul>
         <li ng-repeat="item in list2.items"> Buy {{ item.quantity }} {{ item.name }}s</li>
         <button ng-click="list2.removeList($index);">Remove Item</button>
       </ul>
       <div class="emptyMessage">Nothing bought yet.</div>
      </div>
      </div>
  </div>
  </div>
</div>
  <script src="angular.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

＆＃13;

Answer 1

我创造了一个小提琴：https://jsfiddle.net/ctd36gda/

您可能感兴趣的功能是'moveElement'：

function moveElement(index, fromArray, toArray) {
  toArray.push(fromArray[index]);
  fromArray.splice(index, 1);
}

从数组中删除对象并使用Angular

1 个答案: