添加和NG-重复，简单的大车执行删除项目，采用了棱角分明 [英] Adding and removing items from ng-repeat, simple cart implementation, using angular

问题描述

我试图实现与元素的数组，显示作为标题和图像，用户点击标题的项目应该被添加到一个div时。但是，我不能让它来，当我点击加我的工作，有加，没有形象，没有标题只是一个空白项。
我得到了删除功能的工作，但没有附加功能。

下面是我得到：
添加我 - 按钮和项目列表

 ＆LT;李NG重复= GT在items.data项目＆;
        ＆所述; A HREF =＃＆GT; {{item.title}}＆下; / A＆GT; ＆LT; IMG NG-SRC ={{item.image}}/＆GT;＆LT;一个NG点击=deleteItem（$指数）级=删除项目＆GT; X＆LT; / A＆GT;
        ＆LT;按钮NG点击=的addItem（）＆gt;添加ME＆LT; /按钮＆GT;
    ＆LT; /李＆GT;
 

阵列

  VAR对myApp = angular.module（对myApp，[]）;
myApp.factory（项目功能（）{
变种项= {};
items.data = [{
    标题：项目1
    形象：IMG / item01.jpg
}，{
    标题：项目2
    形象：IMG / item02.jpg
}，{
    标题：第3项
    形象：IMG / item03.jpg
}，{
    标题：项目4，
    形象：IMG / item04.jpg
}];
  返回的物品;
}）;
 

和为附加的功能和删除

 函数ItemsController（$范围，项目，）{
$ scope.items =物品;$ scope.deleteItem =功能（指数）{
    items.data.splice（指数，1）;
}
$ scope.addItem =功能（）{
    items.data.push（{
        标题：$ scope.items.title
    }）;
 }
}
 

解决方案

您需要通过下一次迭代的项目。

 ＆LT;按钮NG点击=的addItem（项目）＆gt;添加ME＆LT; /按钮＆GT;
 

和标题添加到新添加的

  $ scope.addItem =功能（项目）{
    items.data.push（{
      标题：item.title
    }）;
  }
 

这是最好不要使用 $指数（带过滤器如使用时，它可能会导致问题：排序依据过滤器），而不是仅仅通过要删除的项目和：

  $ scope.deleteItem =功能（项目）{
     items.data.splice（items.indexOf（项目），1）;
   }
 

您也有一个无效的HTML，里必须是一个 UL 或醇。

一个实现：

 函数（$范围，项目，）{
  $ scope.items =物品;
  $ scope.cart = [];  $ scope.deleteItem =功能（项目）{
    VAR车= $ scope.cart;
    //从车配套项目
    VAR匹配= getMatchedCartItem（项目）;
    //如果超过一个匹配存在只是减少计数
    如果（match.count→1）{
      match.count  -  = 1;
      返回;
    }
    //删除项目，如果当前计数1
    cart.splice（cart.indexOf（项目），1）;
  }  $ scope.addItem =功能（项目）{
    //从车配套项目
    VAR匹配= getMatchedCartItem（项目），itemToAdd;
     //如果项目存在只是增加计数
    如果（匹配）{
      match.count + = 1;
      返回;
    }    //推新项目到购物车
    itemToAdd = angular.copy（项目）;
    itemToAdd.count = 1;    $ scope.cart.push（itemToAdd）;
  }  功能getMatchedCartItem（项目）{
    /*array.find  - 找到它的垫片在演示* /
    返回$ scope.cart.find（功能（ITM）{
      返回itm.id === item.id
    }）;  }
 

演示

\r

\r

angular.module（应用，[]）。控制器（CTRL ，功能（$范围，项目，）{\r
  $ scope.items =物品;\r
  $ scope.cart = [];\r
\r
  $ scope.deleteItem =功能（项目）{\r
    VAR车= $ scope.cart;\r
    VAR匹配= getMatchedCartItem（项目）;\r
    如果（match.count→1）{\r
      match.count - = 1;\r
      返回;\r
    }\r
    cart.splice（cart.indexOf（项目），1）;\r
  }\r
\r
  $ scope.addItem =功能（项目）{\r
    VAR匹配= getMatchedCartItem（项目）;\r
    如果（匹配）{\r
      match.count + = 1;\r
      返回;\r
    }\r
    VAR itemToAdd = angular.copy（项目）;\r
    itemToAdd.count = 1;\r
    $ scope.cart.push（itemToAdd）;\r
  }\r
\r
  功能getMatchedCartItem（项目）{\r
    返回$ scope.cart.find（功能（ITM）{\r
      返回itm.id === item.id\r
    }）;\r
\r
  }\r
\r
}）工厂（项目功能（）{\r
  变种项= {};\r
  items.data = [{\r
    ID：1，\r
    标题：项目1\r
    形象：IMG / item01.jpg\r
  }，{\r
    ID：2，\r
    标题：项目2\r
    形象：IMG / item02.jpg\r
  }，{\r
    ID：3，\r
    标题：第3项\r
    形象：IMG / item03.jpg\r
  }，{\r
    ID：4，\r
    标题：项目4，\r
    形象：IMG / item04.jpg\r
  }];\r
  返回的物品;\r
}）;\r
\r
如果（！Array.prototype.find）{\r
  Array.prototype.find =功能（predicate）{\r
    如果（这种== NULL）{\r
      抛出新的TypeError（'Array.prototype.find呼吁null或undefined'）;\r
    }\r
    如果（typeof运算predicate！=='功能'）{\r
      抛出新的TypeError（'predicate必须是一个函数'）;\r
    }\r
    VAR列表=对象（this）;\r
    VAR长度= List.length的数字＆GT;＆GT;＆GT; 0;\r
    变种thisArg =参数[1];\r
    VAR值;\r
\r
    对于（VAR I = 0; I＆LT;长度;我++）{\r
      值=列表[我]\r
      如果（predicate.call（thisArg，价值，我，清单））{\r
        返回值;\r
      }\r
    }\r
    返回不确定的;\r
  };\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序NG控制器=CTRL＆GT;\r
  ＆LT; UL＆GT;\r
    ＆LT;李NG重复=项items.dataID =项{{item.id}}＆GT;\r
      ＆所述; A HREF =＃＆GT; {{item.title}}＆下; / A＆GT;\r
      ＆LT; IMG NG-SRC ={{item.image}}/＆GT;\r
      ＆LT;按钮NG点击=的addItem（项目）＆gt;添加ME＆LT; /按钮＆GT;\r
    ＆LT; /李＆GT;\r
  ＆LT; / UL＆GT;\r
  ＆LT; P＆GT;车：其中; / P＆GT;\r
  ＆LT; UL＆GT;\r
    ＆LT;李NG重复=项目在购物车＆GT;\r
      ＆所述; A HREF =＃＆GT; {{item.title}} |计数：{{item.count}}＆LT; / A＆GT;\r
      ＆LT;一个NG点击=deleteItem（项目）级=删除项目＆GT; X＆LT; / A＆GT;\r
\r
    ＆LT; /李＆GT;\r
  ＆LT; / UL＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

我使用 Array.prototype.find ，你需要添加垫片（如演示提及），以便能够使非支持的浏览器。

I'm trying to achieve an array with items that displays as a title and image and when the user click the title the item should be added to a div. However, I can´t make it to work as when I click on "Add me", there is only a blank item added, with no image and no title. I got the delete-function to work but not the add-function.

Here is what I got: The "Add me"-button and the list of items

    <li ng-repeat="item in items.data">
        <a href="#">{{item.title}}</a> <img ng-src="{{ item.image }}" /><a ng-click="deleteItem($index)" class="delete-item">x</a>
        <button ng-click="addItem()">Add Me</button>
    </li>

The array

var myApp = angular.module("myApp", []);
myApp.factory("items", function () {
var items = {};
items.data = [{
    title: "Item 1",
    image: "img/item01.jpg"
}, {
    title: "Item 2",
    image: "img/item02.jpg"
}, {
    title: "Item 3",
    image: "img/item03.jpg"
}, {
    title: "Item 4",
    image: "img/item04.jpg"
}];
  return items;
});

And the functions for add and delete

function ItemsController($scope, items) {
$scope.items = items;

$scope.deleteItem = function (index) {
    items.data.splice(index, 1);
}
$scope.addItem = function () {
    items.data.push({
        title: $scope.items.title
    });
 }
}

解决方案

You need to pass the item under iteration.

<button ng-click="addItem(item)">Add Me</button>

and add the title to the newly added:

  $scope.addItem = function(item) {
    items.data.push({
      title: item.title
    });
  }

it is better not to use $index (it can cause issue when used with filters eg: orderBy filter) instead just pass the item to delete and:

   $scope.deleteItem = function(item) {
     items.data.splice(items.indexOf(item), 1);
   }

You also have an invalid html, li must be a child of ul or ol.

A sample implementation:

 function($scope, items) {
  $scope.items = items;
  $scope.cart = [];

  $scope.deleteItem = function(item) {
    var cart = $scope.cart;
    //Get matched item from the cart
    var match = getMatchedCartItem(item);
    //if more than one match exists just reduce the count
    if (match.count > 1) {
      match.count -= 1;
      return;
    }
    //Remove the item if current count is 1
    cart.splice(cart.indexOf(item), 1);
  }

  $scope.addItem = function(item) {
    //Get matched item from the cart
    var match = getMatchedCartItem(item), itemToAdd ;
     //if item exists just increase the count
    if (match) {
      match.count += 1;
      return;
    }

    //Push the new item to the cart
    itemToAdd = angular.copy(item);
    itemToAdd.count = 1;

    $scope.cart.push(itemToAdd);
  }

  function getMatchedCartItem(item) {
    /*array.find - Find the shim for it in the demo*/
    return $scope.cart.find(function(itm) {
      return itm.id === item.id
    });

  }

Demo

angular.module('app', []).controller('ctrl', function($scope, items) {
  $scope.items = items;
  $scope.cart = [];

  $scope.deleteItem = function(item) {
    var cart = $scope.cart;
    var match = getMatchedCartItem(item);
    if (match.count > 1) {
      match.count -= 1;
      return;
    }
    cart.splice(cart.indexOf(item), 1);
  }

  $scope.addItem = function(item) {
    var match = getMatchedCartItem(item);
    if (match) {
      match.count += 1;
      return;
    }
    var itemToAdd = angular.copy(item);
    itemToAdd.count = 1;
    $scope.cart.push(itemToAdd);
  }

  function getMatchedCartItem(item) {
    return $scope.cart.find(function(itm) {
      return itm.id === item.id
    });

  }

}).factory("items", function() {
  var items = {};
  items.data = [{
    id: 1,
    title: "Item 1",
    image: "img/item01.jpg"
  }, {
    id: 2,
    title: "Item 2",
    image: "img/item02.jpg"
  }, {
    id: 3,
    title: "Item 3",
    image: "img/item03.jpg"
  }, {
    id: 4,
    title: "Item 4",
    image: "img/item04.jpg"
  }];
  return items;
});

if (!Array.prototype.find) {
  Array.prototype.find = function(predicate) {
    if (this == null) {
      throw new TypeError('Array.prototype.find called on null or undefined');
    }
    if (typeof predicate !== 'function') {
      throw new TypeError('predicate must be a function');
    }
    var list = Object(this);
    var length = list.length >>> 0;
    var thisArg = arguments[1];
    var value;

    for (var i = 0; i < length; i++) {
      value = list[i];
      if (predicate.call(thisArg, value, i, list)) {
        return value;
      }
    }
    return undefined;
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="item in items.data" id="item{{item.id}}">
      <a href="#">{{item.title}}</a> 
      <img ng-src="{{ item.image }}" />
      <button ng-click="addItem(item)">Add Me</button>
    </li>
  </ul>
  <p>Cart:</p>
  <ul>
    <li ng-repeat="item in cart">
      <a href="#">{{item.title}} | Count: {{item.count}}</a> 
      <a ng-click="deleteItem(item)" class="delete-item">X</a>

    </li>
  </ul>
</div>

I am using Array.prototype.find, you would need to add the shim (as mentioned in the demo) to be able to make it work for non supported browsers.

这篇关于添加和NG-重复，简单的大车执行删除项目，采用了棱角分明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！