CODEWITHSUNDEEP
angularjsangularjs-scope
BARNOWL
BARNOWL

Reputation: 3589

How to edit a scope in angularjs?

I'm trying to figure out how to edit a scope, i can successfully add and remove a object, in this example im developing a simple todo app.

I was following this tutorial

i referenced a similar question on this site, but nothing similar to what im looking for

How do you edit a scope ?

<!DOCTYPE html>
<html ng-app="eli">
<head
    <meta charset="UTF-8">
    <title>Untitled Bullcrap</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="main.js"></script>
</head>
<body>

<div ng-controller="mycontroller">

<ul>
    <li ng-repeat ="x in products">{{x}}
    <span ng-click="removeItem($index)">&times;</span>
    <button ng-click="selectProduct(x)">Edit</button>
    </li>
</ul>

<input ng-model="addMe">
<button ng-click="addItem()">Add</button>

</div>

</body>
</html>

here is the angularjs script. 

angular.module('eli', [])
    .controller('mycontroller', function($scope){

// My code
        $scope.products = ["Milk", "Bread", "Cheese"];
        $scope.newProduct = {};
        $scope.addItem = function(){
            $scope.products.push($scope.addMe);
        }

        $scope.saveProduct = function(x)
        {
            $scope.products.push($scope.newProduct);
            $scope.newProduct = {};
        }

        $scope.selectProduct = function(x){
            $scope.clickedProduct = x;
        }

        $scope.removeItem = function(x){
            $scope.products.splice(x,1);
        }


        $scope.editItem = function(x){
            $scope.editItem = true;


        }




    });

Upvotes: 0

Views: 106

Answers (1)

phani indra
phani indra

Reputation: 243

angular.module('eli', [])
    .controller('mycontroller', function($scope){

// My code
        $scope.products = ["Milk", "Bread", "Cheese"];
        $scope.newProduct = {};
        $scope.editIndex=-1
        $scope.addItem = function(){
            $scope.products.push($scope.addMe);
        }

        $scope.saveProduct = function(x)
        {
            $scope.products.push($scope.newProduct);
            $scope.newProduct = {};
        }

        $scope.editProduct = function(x){
            $scope.editIndex = x;
            $scope.addMe=$scope.products[x];
        }

        $scope.updateItem=function(){
        	$scope.products[$scope.editIndex]=$scope.addMe;
        	$scope.editIndex = -1;
        	$scope.addMe="";
        }

        $scope.removeItem = function(x){
            $scope.products.splice(x,1);
        }
    });
<!DOCTYPE html>
<html ng-app="eli">
<head
    <meta charset="UTF-8">
    <title>Untitled Bullcrap</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>

<div ng-controller="mycontroller">

<ul>
    <li ng-repeat ="x in products">{{x}}
    <span ng-click="removeItem($index)">&times;</span>
    <button ng-click="editProduct($index)">Edit</button>
    </li>
</ul>

<input ng-model="addMe">
<button ng-click="addItem()" ng-if="editIndex==-1">Add</button>
<button ng-click="updateItem()" ng-if="editIndex>-1">Update</button>

</div>
</body>
</html>

Upvotes: 1

Related Questions