Question

我正在试图弄清楚如何编辑一个范围，我可以成功添加和删除一个对象，在这个例子中我正在开发一个简单的待办事项应用程序。

我正在关注此tutorial

我在这个网站上引用了一个类似的问题，但没有类似于我正在寻找的内容

如何编辑范围？

<!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>

这是angularjs脚本。

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;


        }




    });

Answer 1

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>

如何在angularjs中编辑范围？

1 个答案: