Question

我正在制作用于学习目的的CRUD应用程序。我需要点击编辑按钮更新现有的javascript数组。但是目前它没有更新现有的数组而不是它创建新的记录。下面是控制器的JS代码

对于添加屏幕，下面是控制器代码

.controller('addController', ['$scope','$location','$rootScope', function(scope,location,rootScope){

    scope.save = function (){
        scope.personName = document.getElementById('name').value;
        scope.personDesc = document.getElementById('desc').value;

        scope.person = {'name' : scope.personName, 'desc' : scope.personDesc};

        if(typeof rootScope.crew === 'undefined'){
            rootScope.crew = [];
        }
        rootScope.crew.push(scope.person);
        location.path("/");
    }
}])

对于编辑屏幕，下面是控制器的代码： -

.controller('editController',['$scope','$location','$routeParams','$rootScope', function(scope,location,routeParams,rootScope){
    var oldName = scope.crew[routeParams.id].name;


    document.getElementById('name').value = scope.crew[routeParams.id].name;
    document.getElementById('desc').value = scope.crew[routeParams.id].desc;

    scope.editSave = function(){
        scope.person = {
            'name' : document.getElementById('name').value, 
            'desc' : document.getElementById('desc').value
        }

        rootScope.crew.push(scope.person);
        location.path("/");
    }
}])

目前我在现有阵列中添加记录而非更新。

请建议

Answer 1

问题是你正在将一个新项目推送到数组。您只需要与范围内的人更新现有人员。

.controller('editController',['$scope','$location','$routeParams','$rootScope', function(scope,location,routeParams,rootScope){
    var person = scope.crew[routeParams.id]

    scope.person = {
        name = person.name,
        desc = person.desc
    };

    scope.editSave = function(){
        scope.crew[routeParams.id] = scope.person;
        location.path("/");
    }
}])

在您的编辑视图中，您将拥有以下内容：

<input type="text" id="name" ng-model="person.name"/>
<input type="text" id="desc" ng-model="person.desc"/>

还值得一提的是，没有必要像document.getElementById这样的代码将为您处理模型绑定，因此您不必使用javascript与dom进行交互

Answer 2

您在数组中推送的每个对象都必须由某个id标识。因此，为您正在推送的person对象分配一个id属性。

现在来到edit.html

<tr ng-repeat="p in person">
{{p.name}}

//In button  I am passing id which I used in editing the person object
<button ng-click="edit(p.id)"></button> 
</tr>
//In controller
edit(id){
//firstly search for the person which is going to be updated
for(i=0;i<arrayInWhichYouArePushingData.length;i++)
  {   
     if(arrayInWhichYouArePushingData[i].id==id)
        {
         arrayInWhichYouArePushingData[i]=UpdatedData;
           break;
       }

  }

这只是一种解决此类问题的算法。你必须稍微修改一下。

在javascript中编辑更新现有数组

2 个答案: