AngularJS ng-submit 中的两个不同操作
AngularJS two different actions in ng-submit
我是 AngularJS 的新手,目前我正在尝试创建一个用于跟踪费用的水疗中心作为一个简单的项目,但我的代码存在一些问题。
我设法完成了大部分功能,但我在更新功能上遇到了困难,我希望能够在不创建另一个按钮的情况下更新数据,而不是使用用于添加新数据的相同提交按钮
这里是html和js代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Expenses Tracker</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand"><img src="logo.png" class="brand" height="40" />
Simple Expenses App Tracker</span>
</div>
</div>
</nav>
<div class="main" ng-app="myList" ng-controller="myListController">
<img src="logo.png" class="logo">
<form ng-submit="newItem()" class="form">
<input required type="number" placeholder="Amount" ng-model="amount">
<input required type="text" placeholder="Description" ng-model="description">
<input type="submit" value="Submit" class="btn btn-success">
</form>
<ul>
<li ng-repeat="item in items">
<span class="pull-left"> {{item.amount}} den.</span> {{item.description}}
<span class="buttons">
<input type="button" ng-click="editItem($index)" value="Edit" class="btn btn-primary" >
<input type="button" ng-click="deleteItem($index)" value="Delete" class="btn btn-danger">
</span>
</li>
<br>
<li><span class="total">{{totalPrice()}} den.</span> <span class="expense"> Total Expenses</span></li>
</ul>
</div>
<script src="bootstrap.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
var myApp = angular.module("myList", []);
myApp.controller("myListController", function($scope) {
$scope.items = [];
$scope.newItem = function() {
$scope.items.push({description:$scope.description, amount: $scope.amount});
$scope.description = '';
$scope.amount = 0
};
$scope.deleteItem = function(index) {
$scope.items.splice(index, 1);
}
$scope.totalPrice = function() {
var total = 0;
for(count=0; count<$scope.items.length;count++){
total += $scope.items[count].amount;
}
return total;
};
$scope.editItem = function(index) {
$scope.amount = $scope.items[index].amount;
$scope.description = $scope.items[index].description;
};
});
您可以有两个范围变量来跟踪是否处于编辑模式并跟踪正在编辑的索引,并且在 newItem()
中可以有一个 if else 语句是否基于编辑模式
例如你可以做类似
的事情
var myApp = angular.module("myList", []);
myApp.controller("myListController", function($scope) {
$scope.items = [];
$scope.isEdit = false; // initialize
$scope.editingIndex = null; //initialize
$scope.newItem = function() {
if(!$scope.isEdit){ //if not in edit mode -> add new
$scope.items.push({description:$scope.description, amount: $scope.amount});
}
else{ //in edit mode -> edit the object
$scope.items[$scope.editingIndex] = { //replace with new values
description:$scope.description, amount: $scope.amount
}
$scope.isEdit = false; //setting back to false
$scope.editingIndex = null;
}
$scope.description = '';
$scope.amount = 0
};
$scope.deleteItem = function(index) {
$scope.items.splice(index, 1);
}
$scope.totalPrice = function() {
var total = 0;
for(count=0; count<$scope.items.length;count++){
total += $scope.items[count].amount;
}
return total;
};
$scope.editItem = function(index) {
$scope.isEdit = true; //setting edit mode true
$scope.editingIndex = index; //setting the index to edit
$scope.amount = $scope.items[index].amount;
$scope.description = $scope.items[index].description;
};
});
我是 AngularJS 的新手,目前我正在尝试创建一个用于跟踪费用的水疗中心作为一个简单的项目,但我的代码存在一些问题。
我设法完成了大部分功能,但我在更新功能上遇到了困难,我希望能够在不创建另一个按钮的情况下更新数据,而不是使用用于添加新数据的相同提交按钮
这里是html和js代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Expenses Tracker</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand"><img src="logo.png" class="brand" height="40" />
Simple Expenses App Tracker</span>
</div>
</div>
</nav>
<div class="main" ng-app="myList" ng-controller="myListController">
<img src="logo.png" class="logo">
<form ng-submit="newItem()" class="form">
<input required type="number" placeholder="Amount" ng-model="amount">
<input required type="text" placeholder="Description" ng-model="description">
<input type="submit" value="Submit" class="btn btn-success">
</form>
<ul>
<li ng-repeat="item in items">
<span class="pull-left"> {{item.amount}} den.</span> {{item.description}}
<span class="buttons">
<input type="button" ng-click="editItem($index)" value="Edit" class="btn btn-primary" >
<input type="button" ng-click="deleteItem($index)" value="Delete" class="btn btn-danger">
</span>
</li>
<br>
<li><span class="total">{{totalPrice()}} den.</span> <span class="expense"> Total Expenses</span></li>
</ul>
</div>
<script src="bootstrap.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
var myApp = angular.module("myList", []);
myApp.controller("myListController", function($scope) {
$scope.items = [];
$scope.newItem = function() {
$scope.items.push({description:$scope.description, amount: $scope.amount});
$scope.description = '';
$scope.amount = 0
};
$scope.deleteItem = function(index) {
$scope.items.splice(index, 1);
}
$scope.totalPrice = function() {
var total = 0;
for(count=0; count<$scope.items.length;count++){
total += $scope.items[count].amount;
}
return total;
};
$scope.editItem = function(index) {
$scope.amount = $scope.items[index].amount;
$scope.description = $scope.items[index].description;
};
});
您可以有两个范围变量来跟踪是否处于编辑模式并跟踪正在编辑的索引,并且在 newItem()
中可以有一个 if else 语句是否基于编辑模式
例如你可以做类似
var myApp = angular.module("myList", []);
myApp.controller("myListController", function($scope) {
$scope.items = [];
$scope.isEdit = false; // initialize
$scope.editingIndex = null; //initialize
$scope.newItem = function() {
if(!$scope.isEdit){ //if not in edit mode -> add new
$scope.items.push({description:$scope.description, amount: $scope.amount});
}
else{ //in edit mode -> edit the object
$scope.items[$scope.editingIndex] = { //replace with new values
description:$scope.description, amount: $scope.amount
}
$scope.isEdit = false; //setting back to false
$scope.editingIndex = null;
}
$scope.description = '';
$scope.amount = 0
};
$scope.deleteItem = function(index) {
$scope.items.splice(index, 1);
}
$scope.totalPrice = function() {
var total = 0;
for(count=0; count<$scope.items.length;count++){
total += $scope.items[count].amount;
}
return total;
};
$scope.editItem = function(index) {
$scope.isEdit = true; //setting edit mode true
$scope.editingIndex = index; //setting the index to edit
$scope.amount = $scope.items[index].amount;
$scope.description = $scope.items[index].description;
};
});