How to add or delete list items in ionic. list items in ionic

How to add or delete list items in ionic. list items in ionic

When you encounter a page like a form in a project, you need to add or delete a line. For example:

 

You can select a product and display the product information list.

The html code is as follows:

<Div class = "chanpinxiangqing"> <div class = "item-divider"> product details </div> <div class = "chanpinxiangqing" ng-repeat = "master in masters "> <div class =" item-divider "> <div class =" "ng-click =" selectorOne ($ index) "style =" display: inline-block; width: 50%; "> <div class =" chioceHook sPround "> <div class =" ion-checkmark-round ng-hide "ng-show =" master. checked "style =" "> </div> <span style =" margin-left: 20px; "> product </span> </div> <div ng-click =" upOrdown ($ index); "ng-class =" {true: 'up ', false: 'upword'} [master. updown] "> </div> <ul class =" rzInfo "ng-show =" master. up "> <li class =" row "> <span class =" col-xs-5 "> <! -- Product type --> {master. chanpinType }}</span> <select class = "" ng-model = "myselectType" mobiscroll-select = "settings" mobiscroll-instance = "demo"> <option value =" 0 "> select </option> <option value =" 1 "> Chinese medicine </option> <option value =" 2 "> Western medicine </option> </select> </li> <li class = "row"> <span class = "col-xs-5"> <! -- Product name --> {master. chanpinName }}</span> <select class = "" ng-model = "myselectName" placeholder = "select" mobiscroll-select = "settings" mobiscroll-instance = "demo"> <option value = "0"> select </option> <option value = "1"> injection </option> <option value = "2"> anesthesia </option> </select> </li> <li class = "row"> <span class = "col-xs-5"> <! -- Specification --> {master. guige }}</span> <select class = "" ng-model = "myselectGuige" placeholder = "Please select" mobiscroll-select = "settings" mobiscroll-instance = "demo"> <option value = "0"> select </option> <option value = "1"> 10 ml </option> <option value = "2"> 20 ml </option> </select> </li> <li class = "row"> <span class = "col-xs-5"> <! -- Unit --> {master. danwei }}</span> <input type = "text" name = "class =" col-xs-8 "value =" "/> </li> <li class =" row"> <span class = "col-xs-5"> <! -- Quantity -- >{{ master. num }}</span> <! -- <B class = "" contenteditable = "true" ng-model = "dataclean"> </B> --> <input type = "text" name = "" class =" col-xs-8 "value =" "/> </li> <li class =" row "> <span class =" col-xs-5 "> <! -- Unit price (RMB) --> {master. price }}</span> <input type = "text" name = "" class = "col-xs-8" value = ""/> </li> <li class = "row"> <span class = "col-xs-5"> <! -- Total price --> {master. total }}</span> <input type = "text" name = "" readonly class = "col-xs-8" value = ""/> </li> </ul> </ div> </div> <div class = "" style = "margin-top: 10px; padding: 10px; text-align: right; background: # fff; "> <span> total shipment volume: </span> </div> <div class = ""> <div class = "btnadd" ng-click = "add () "> Add </div> <div class =" btndel "ng-click =" delete () "> delete </div>

Js Code:

// Controller and service. controller ('fhshenqingaddctrl ', function ($ scope, CONFIG, $ ionicSlideBoxDelegate, $ rootScope, $ http, $ ionicPopup, faHuoService, $ timeout, $ window, loading, tool) {// type name and type selection dialog box under the product $ scope. settings = {theme: 'mobiscroll ', lang: 'zh', display: 'center', cancelText: 'cancel', setText: 'true', onBeforeClose: function (event, inst) {if (event. button = "set") {$ scope. startdate = event. valueText ;/ /Obtain the console of the selected date. log ($ scope. startdate)} else if (event. button = "cancel") {console. log ("canceled") }}; // Add $ scope. masters = [{'chanpintype': 'product type', 'chanpinname': 'product name', 'guige ': 'specialize', 'danwei': 'unit ', 'num': 'Count', 'price': 'unit price (RMB) ', 'Total': 'Total', 'checked': 'true ', // select to switch to 'updownstream ': 'true', // The drop-down content shows to switch to 'up': 'true'. // the up and down arrow switches}]; $ scope. add = function () {$ scope. category = {'chanpintype': 'product type', 'chanpinname': 'product name', 'G Uige ': 'SIZE', 'danwei': 'unit', 'num': 'quantity ', 'price': 'unit price (RMB)', 'Total ': 'Total price ', 'checked': 'true', // You can select to switch to 'upted': 'true'. // switch to 'up' when the drop-down content is displayed ': 'true' // up/down arrow switch}; var bb = angular. copy ($ scope. scope); $ scope. masters. push (bb) console. log ($ scope. masters)}; // Delete $ scope. delete = function () {var arr = []; angular. forEach ($ scope. masters, function (item, index) {if (! Item. checked) {arr. push (item) ;}}) // console. log (arr) $ scope. masters = arr ;}; // the up and down arrow points to write the code piece $ scope. upOrdown = function (rowNumber) {console. log ($ scope. masters [rowNumber]. updown) $ scope. masters [rowNumber]. up =! $ Scope. masters [rowNumber]. up; $ scope. masters [rowNumber]. updown =! $ Scope. masters [rowNumber]. updown;}; // select $ scope in a row. selectorOne = function (rowNumber) {console. log ($ scope. masters [rowNumber]. checked) $ scope. masters [rowNumber]. checked =! $ Scope. masters [rowNumber]. checked ;};})

The result is:

Before clicking

After clicking

The above section describes how to add and delete list items in ionic. The editor will reply to you in time. Thank you very much for your support for the help House website!