如何编辑项目?

时间:2015-08-30 18:03:21

标签: angularjs

所以我有这个简单的例子如何添加和删除项目,但问题在于编辑。我有这个小提琴:https://jsfiddle.net/b24dqk0r/3/我想要当用户点击确定将该项保存在数组中时。任何建议?

$scope.Save = function (firstName)
{
  $scope.Persons.splice(1,firstName)
} 

1 个答案:

答案 0 :(得分:2)

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="angular/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.Persons = [];
        $scope.firstName = "";
        $scope.showEdit = false;
        $scope.editValue="";

       $scope.addItem = function(item)
    {
        $scope.Persons.push(item);
        $scope.firstName ="";
    }
        $scope.removeItem = function(person)
        {
             $scope.Persons.splice( $scope.Persons.indexOf(person), 1 );
        }
        $scope.editPersons = function (item) {  
         $scope.showEdit = true;
         $scope.editValue = item;
         $scope.helpEdit = item;
        }   
        $scope.Save = function ()
        {
         editVal = $scope.Persons.splice( $scope.Persons.indexOf($scope.helpEdit), 1 );
         $scope.Persons.push($scope.editValue);
         $scope.editValue="";
         $scope.showEdit = false;
         console.log(editVal);
        } 

    });

    </script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>

<br>
<ul ng-repeat="person in Persons | filter:search">
<li>{{person}}<button type="button" ng-click="removeItem(person)">REMOVE</button>
<button type="button" ng-click="editPersons(person)">UPDATE</button>
</li>

</ul>
<div ng-show="showEdit">
First Name: <input type="text" ng-model="editValue"><br>
    <button type="button" ng-click="Save()">SAVE</button>

</div>
<button type="button" ng-click="addItem(firstName)">ADD</button>
<br/>
    <label>SEARCH</label><input type="search" ng-model="search" />
</div>

</body>
</html>