AngularJS 購物車全選 取消全選功能實現

2021-10-09 07:05:34 字數 711 閱讀 1966

剛學習angularjs,於是練習寫了乙個類似於購物車的全選/取消全選的功能,主要實現的功能有:

1、勾選全選checkbox,列表資料全部被勾選,取消同理,用ng-model實現雙向繫結;

3、全部勾選後,只要取消乙個全選的check狀態就為false;

4、實現購物車的小計和總金額計算,僅計算被勾選的商品;

存在待完善的問題:

1、數量我用了type="number",設定了min=10,但手動輸入的值沒有做限制,所以如果手動輸入會有非法值;

2、刪除商品功能我只是簡單的用了pop()方法,移除最後乙個陣列元素,實際應該對每乙個商品物件實現刪除;

3、全選/取消全選應該還有更嚴謹的方法,待完善;

附上效果圖:

附上**:

angularjs--購物車實現全選/取消全選

新增商品

刪除商品

操作check狀態

商品名稱

單價數量

小計

}||}

}單價:¥}

數量:小計:¥}

全選取消全選

已選擇}件商品,總金額:¥}

如果以上**有問題或者您有更好的建議,歡迎您聯絡我,謝謝。

angularjs簡單購物車原始碼

顯示 產品名字 購買數量 產品單價 產品總價 操作 rmb 移除 總購買價 總購買數量 清空購物車 您的購物車為空 實現類模組 var cartcontroller function scope 計算總價 scope.totalprice function return totalprice 計算總...

購物車(註冊 登入 購物 購物車 結帳)

購物車 註冊 登入 購物 購物車 結帳 shopping car dict dict money 0 def input username pwd username input username pwd input pwd return username,pwd def goods get with...

Vue實現購物車全選及價格計算

vuejs實戰 這本書中5.5是一道實戰題 利用計算屬性 指令等知識開發購物車。練習1 在當前示例基礎上擴充套件商品列表,新增一項是否選中該商品的功能,總價變為只計算選中商品的總價,同時提供乙個全選的按鈕。練習2 將商品列表list改為乙個二維陣列來實現商品的分類,比如可分為 電子產品 生活用品 和...