angular結尾-彈框購買修改案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
angular.module("myapp",[]).controller("myctrl",function ($scope) {
$scope.goods=[{
name:"iPhone",
price:8300,
num:30,
type:200,
},{
name:"iPhone 6s",
price:5400,
num:30,
type:200,
},{
name:"iPhone 7Plus",
price:6600,
num:30,
type:200,
},{
name:"iPad",
price:3500,
num:3,
type:200,
},]
//全選，全不選
$scope.ck=function () {
var qx=$scope.qx;
for (var i = 0 ; i<$scope.goods.length;i++) {
$scope.goods[i].checked=qx;
}
}
//刪除,批量刪除
$scope.delAll=function () {
var ids=false;
for (var i = 0 ; i<$scope.goods.length;i++) {
if ($scope.goods[i].checked==true) {
ids=true;
}
}
if (ids==""){
alert("請選擇要刪除的商品！");
}else{
for (var i = 0 ; i<$scope.goods.length;i++) {
if ($scope.goods[i].checked==true) {
$scope.goods.splice(i,1);
i--;
}
}
}
}
//購買
$scope.buy=function (index) {
$scope.num = $scope.goods[index].num;
$scope.type = $scope.goods[index].type;
$scope.goods[index].num = $scope.num-1;
$scope.goods[index].type = $scope.type+1;
if ($scope.goods[index].num<0) {
alert("庫存不足！！！");
$scope.goods[index].num = $scope.num;
$scope.goods[index].type = $scope.type;
}
}
//修改
$scope.upd=function (index) {
$scope.price = $scope.goods[index].price;
$scope.price1 = prompt("請輸入修改的商品價格：",$scope.price);
$scope.goods[index].price = $scope.price1;
}
//新增
$scope.flag=false;
$scope.save=function () {
//獲取值
var name1 = $scope.name1;
var price1 = $scope.price1;
var num1 = $scope.num1;
var type1 = $scope.type1;
//將String轉換為int型別
var num2 =parseInt(num1);
var type2 =parseInt(type1);
//新增
$scope.goods.push({
name:name1,
price:price1,
num:num1,
type:type2
})
$scope.flag=false;
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div style="width: 700px;">
<input type="text" ng-model="plname" placeholder="請輸入關鍵字" />
<button ng-click="flag=true">新增商品</button>
<button ng-click="delAll()" style="float: right;">刪除/批量刪除</button>
</div>
<table border="1" cellpadding="0" cellspacing="0" style="width: 700px;">
<tr align="center">
<td><input type="checkbox" ng-model="qx" ng-change="ck()"></td>
<td>商品名稱</td>
<td>商品價格<button ng-click="px='price';sj=!sj">排序</button></td>
<td>商品庫存<button ng-click="px='num';sj=!sj">排序</button></td>
<td>商品銷量<button ng-click="px='type';sj=!sj">排序</button></td>
<td>操作</td>
</tr>
<tr ng-repeat="s in goods|filter:{name:plname}|orderBy:px:sj" align="center">
<td><input type="checkbox" ng-model="s.checked"></td>
<td>{{s.name}}</td>
<td>{{s.price|currency:"$:"}}</td>
<td>{{s.num}}</td>
<td>{{s.type}}</td>
<td>
<button ng-click="buy($index)">購買</button> |
<button ng-click="upd($index)">修改</button>
</td>
</tr>
</table>
<form ng-show="flag">
商品名稱:<input type="text" ng-model="name1" /><br />
商品價格:<input type="text" ng-model="price1" /><br />
商品庫存:<input type="text" ng-model="num1" /><br />
商品銷量:<input type="text" ng-model="type1" /><br />
<button ng-click="save()">新增</button>
</form>
</body>
</html>
相關推薦
angular結尾-彈框購買修改案例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src=
angular指令彈框點選空白處隱藏及常規方法
效果圖展示： 第一種方法：angularjs自定義指令： 指令： app.directive('onBlankHide', function () { return { restrict: 'A', sco
angular指令彈框點擊空白處隱藏及常規方法
inpu click hid 效果圖 直接 fad btn ima javascrip 效果圖展示： 第一種方法：angularjs自定義指令： 指令： app.directive(‘onBlankHide‘, function () {
Angular JS 增刪改查（彈框修改）
input{ border-radius: 5px; } ul{ list-style: none; } .tip{ color: red; } .aquamarine{ background-color: aquamarine; } .antiqu
Thinkphp5結合layer彈框插件修改默認的提示信息
com 分享圖片 pro jquer ado ext 記得 文件 water TP5的默認提示效果啊，很醜有沒有！！1 那就用layer插件改吧插件地址插件引入<script src="jQuery的路徑"></script> &
Angular中sweetalert彈框的使用詳解
https text 找到 pre docs function 提示 行操作 ppr 最近太忙了，項目中使用的彈框老板嫌太醜，讓我們優化一下，我在網上找了一下，找到了sweetalert彈框，算是比較好看的彈框了。所以我就想辦法將sweetalert用到項目中，在項目中引入
angular引用封裝表格顯示彈框
引用表格元件 //將元件引入到自己的模組中 import { DataTableModule } from 'ng-itoo-datatable; imports: [ DataTable
angular中model彈框消失後遮罩層未隱藏的解決方法
在做專案的時候，遇到個問題，在controller中執行彈出框隱藏函式後立即跳轉路由，出現遮罩層不隱藏的情況 showAlertDialog函式如圖，即1秒後模態框自動隱藏 開啟瀏覽器除錯，看到頁面中有遮罩層，且元素中還存在一個modal-backd
修改網頁的alert彈框樣式讓你的頁面更美觀（js封裝之路（1.1））
由於頁面中原來的alert彈框樣式相當的醜，所以就想到了自己去設定一下alert的彈框樣式 首先是自己先設計好一個彈框的樣式可以如下圖： 樣式搭建完成就可以用js來編寫一個alert函數了： js部分如下： function alert(e){ //此處將html中的d
IDEA2018,git 不彈出輸入密碼框（修改密碼後），Fetch failed: Authentication failed for.....
查了很久終於解決了。 網上說的Setting中的Pssword,Dont save，又重啟那些根本沒用...... 1 git cmd輸入：git config --system --unset credential.helper 2 File->Setting-
bootstrap中popover.js(彈出框)使用總結+案例
bootstrap中popover(彈出框)使用總結+案例 一. popover常用配置引數： //常用配置引數： $(document).ready(function() { $('#temp').popover( {
輕量級彈框 (修改後)
ffffff -c com head turn width length fff middle 這個是某一天隨便找的, 找了哪個前輩的(我也忘了 實在不好意思),後來改動了下 得到自己想要的 效果圖: <!DOCTYPE html> <htm
android menu pop彈出框的修改方案
前段時間公司針對menu pop有個需求，需要彈出的menu pop框效果與小米的保持一致，在實現onCreateOptionsMenu方法的介面，對於豎屏顯示，點選menu鍵，彈出的menu panel寬度與手機螢幕保持一致，高度為內容的高度；對於橫屏的顯示，點選me
修改系統預設 alert 彈框樣式
修改預設 alert 彈框，思路很簡單，定義一個 alert(e) 函式，載入最開頭即可。 css部分： <style> #msg{ width:266px; position: fixed; z-inde
EasyUI彈窗批量修改combogrid下拉框的值
JS方法 //點選彈出批量修改框 UpdateLot: function () { var row = $("#dg").datagrid("getChecked"); if (row.len
MaxAlertView 強大的彈框試圖
src popu popup typeof pop margin code extc -s 【鏈接】https://github.com/MrJalen/MaxAlertView MaxAlertView if (indexPath.section == 0) {
python小工具 - alert彈框輸出姓名年齡、求和
sum entry 數字 之間 col import 技術分享 app button 使用python自帶的tkinter庫進行GUI編程，完成兩個功能： （1）要求用戶輸入姓名和年齡然後打印出來 （2）要求用戶輸入一個數字，然後計算1到該數字之間的和 代碼部分： # 導
彈框&可用於判斷
回來 選擇 是否 單機 執行 pro 關閉 右上角 等於 較常用的彈框：（3種） 1.prompt("顯示用戶的文本","輸入域的默認值")； print();顯示打印的對話框； find();顯示查找的對話框； (用處有限)
在彈框中獲取foreach中遍歷的id值，並傳遞給地址欄（方法2）
ges 應該 我們 png 地址欄 each 獲取 賦值 有時 1.php有時候我們需要再彈框中獲取foreach中遍歷的數據（例如id），在彈框中點擊按鈕並傳遞給地址欄跳轉。那麽應該怎麽做呢。第二種方法。 2. 可以在彈框中給出一個input hidden 點擊按鈕彈窗時
彈框DialogBuilder的使用
ada off mem height fff inf sse click line 具體設置如下：package com.gloiot.hygooilstation.ui.widget; import android.animation.Animator; import