AngularJS two different actions in ng-submit-CodePudding

I'm new to AngularJS, currently I am trying to create a spa for tracking expenses as a simple project but I have some problems with my code.

I managed to do the most of the function but I got stuck at the update function, I want to be able to update the data without creating another button, instead using the same submit button which is used to add new data

Here is the html and js code:

<!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  role="navigation">
        <div >
            <div >
                <span ><img src="logo.png"  height="40" />
                 Simple Expenses App Tracker</span>
            </div>
        </div>
    </nav>

    <div  ng-app="myList" ng-controller="myListController">

        <img src="logo.png" >
        
    <form ng-submit="newItem()" >
        <input required type="number" placeholder="Amount" ng-model="amount">
        <input required type="text" placeholder="Description" ng-model="description">
        <input type="submit" value="Submit" >
    </form>
        <ul>
            <li ng-repeat="item in items">
                <span  > {{item.amount}} den.</span> {{item.description}}
                <span >
                    <input type="button" ng-click="editItem($index)" value="Edit"  >
                    <input type="button" ng-click="deleteItem($index)" value="Delete" >
                </span>
            </li>
            <br>
            <li><span >{{totalPrice()}} den.</span> <span > 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;
    };

});

CodePudding user response：

You could have two scope variables to keep track if in edit mode and to keep track of the index that is being edited, and in the newItem() can have an if else statement based on edit mode or not For example you could do something like

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;
    };

});

demo