javascript - How do I remove dynamically added objects from an array with a button associated with each object? -
i'm using angular build shopping list app. have 2 pre-created lists, each 2 , 3 pre-created items respectively testing purposes. of course there no pre-created items or lists. dynamically added user. able add item button working can add new item each list.
here's pen play around - http://codepen.io/anon/pen/wrazev
<body ng-controller="notepadcontroller notepad"> <header ng-repeat="list in notepad.lists"> <div>delete list</div> <h1>{{list.name}}</h1> </header> <div ng-repeat="list in notepad.lists" class="shoppinglist" ng-controller="itemcontroller itemctrl"> <ul> <li ng-repeat="item in list.items"> <label> <input type="checkbox" ng-model="item.checked"> {{item.name}} </label> <form name="removeitemform" ng-submit="itemctrl.removeitem(list)"> <input type="submit" value="remove item"> </form> </li> </ul> <form name="itemform" ng-submit="itemctrl.additem(list)"> <input type="text" ng-model="itemctrl.item.name"> <input type="submit" value="add item"> </form> </div> </body> the javascript is:
(function(){ var app = angular.module('notepadapp', []); var shoppinglists = [ { name: 'groceries', items: [ { name: 'milk', checked: false }, { name: 'eggs', checked: false } ] }, { name: 'cvs', items: [ { name: 'pills', checked: false }, { name: 'cotton balls', checked: false }, { name: 'cigs', checked: false } ] } ]; app.controller('notepadcontroller', function(){ this.lists = shoppinglists; }); app.controller('itemcontroller', function(){ this.item = {}; // add new item shopping list this.additem = function(list){ list.items.push(this.item); this.item = {}; }; // remove item shopping list this.removeitem = function(list){ var listofitems = []; var i; (i = 0; < list.items.length; i++){ list.items.splice(list.items[i,1]); } }; }); })(); the remove item button removes items list rather item it's associated with. realize why it's doing this, can't figure out how index of item removed , have remove item button delete one.
let's think little bit. have 2 controllers. 1 contains list, , other contains logic item.
first of all, if want modify list, functions modify should live in same controller list lives in.
currently you're stuck passing entire list because of way you've set controllers. think you're starting see what's going wrong approach.
let's start repeater
ng-repeat="item in list" this gives item, want pass in function.
just how access item output name of it, can use pass removeitem.
<form name="removeitemform" ng-submit="notepad.removeitem(item)"> <input type="submit" value="remove item"> </form> you'll want removeitem live in same controller list lives. (notice changed itemctrl.removeitem notepad.removeitem.
in notepadcontroller:
this.removeitem = function(item){ var index = this.list.indexof(item); if (index > -1) { this.list.splice(index, 1); // remove item } }; ng-repeat let's use variable called $index, use provide index want remove list:
ng-submit="notpad.removeitem($index) and method like
this.removeitem = function(index) { this.list.splice(index, 1); } 
Comments
Post a Comment