2015-10-16 81 views
0

我正在使用离子有看起来像这样的静态JSON用户记录数据的Android应用程序更新离子一个JSON记录:}如何通过ID

serv.factory('Records', function(){ 
     var users = [{ 
     id: 0, 
     profilePic: 'img/pic4.jpg',  
     username: 'admin', 
     password: 'admin', 
     fname: 'first Name', 
     lastName: 'Last Name', 
     email: '[email protected]' 
     }, { 
     id: 1, 
     profilePic: 'img/pic3.png',  
     username: 'user', 
     password: 'user', 
     fname: 'First Name', 
     lastName: 'Last Name', 
     email: '[email protected]', 
     }]; 

    return { 
    all: function(){ 
     return users; 
    }, 
    remove: function(user) { 
     users.splice(users.indexOf(user), 1); 
    }, 
    get: function(userId) { 
     for (var i = 0; i < users.length; i++) { 
     if (users[i].id === parseInt(userId)) { 
      return users[i]; 
     } 
     } 
     return null; 
    } 
    }; 

);

我有一个模态视图,在上面的记录上有以下值的输入文本。现在,我试图通过ng-click =“updateUser(user)”获取所有值并将数据传递给控制器​​来更新记录。我的控制器的功能是这样的:

$scope.updateUser = function(user){ 

    $scope.users.push({id : user.id, profilePic: user.profilePic, username: user.username, password: user.password, fname: user.fname, lastName: user.lastName, email: user.email, dob: user.dob}); 

Records.remove(user); 

    $scope.modal.hide(); 

    }; 

这还真管用,因为我刚刚创造了新的阵列内的用户和删除其他用户的记录,其中ID等于什么我已插入,但我已插入记录改变了它的位置,我显示的记录列表的底部..我想知道的是,有无论如何(可能的方式),我可以更新记录而不搞乱事情?就像当我查看第二条记录时,它将一些数据混合到第一条记录:(我只是想有一个更新,就像数据库查询更新从哪里ID = ID,就是这样)

我越来越更新从这里我的观点:

<ion-view view-title="Account"> 
    <ion-content can-swipe="true"> 

     <ion-list can-swipe="true"> 
     <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="user in users | orderBy:'id'" type="item-text-wrap" href="#/tab/account/{{user.id}}"> 
     <img ng-src="{{user.profilePic}}" style="width: 64px; height: 64px"> 
     <h2>{{user.username}}</h2> 
     <p>{{user.password}}</p> 
     <i class="icon ion-chevron-right icon-accessory"></i> 

     <ion-option-button class="button button-assertive" ng-click="remove(user)"> 
      Delete<!-- <i class="icon ion-android-delete"></i> --> 
     </ion-option-button> 
     <ion-option-button class="button button-positive" ng-click="openModal(user.id)"> 
     Edit<!-- <i class="icon ion-edit"></i> --> 
     </ion-option-button> 
     </ion-item> 
     </ion-list> 

    </ion-content> 
</ion-view> 

<script id="my-modal.html" type="text/ng-template"> 
    <ion-modal-view> 
    <ion-header-bar class="bar bar-header bar-calm"> 
      <button class="button button-clear button-primary" ng-click="modal.hide()"><i class="icon ion-android-close"></i></button> 
    </ion-header-bar> 
    <ion-content > 

    <form name="form" ng-model="form"> 
     <ion-list> 
     <input type="hidden" ng-model="user.id"> 
     <label class="item item-input"> 
      <span class="input-label">Username</span> 
      <input type="text" value="{{user.username}}"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Current Password</span> 
      <input type="password" value="{{user.password}}"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">New Password</span> 
      <input type="password" ng-model="user.newPass"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Confirm Password</span> 
      <input type="password" ng-model="user.confPass"> 
     </label>   
     <label class="item item-input"> 
      <span class="input-label">First Name</span> 
      <input type="text" value="{{user.fname}}" > 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Last Name</span> 
      <input type="text" value="{{user.lastName}}" > 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Email</span> 
      <input type="text" value="{{user.email}}" > 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Date of Birth</span> 
      <input type="text" value="{{user.dob}}"> 
     </label> 
     </ion-list> 
      <button class="button button-full button-positive" ng-click="updateUser(user)">Update</button> 
    </form> 

    </ion-content> 
    </ion-modal-view> 
</script> 

回答

0

不知道,如果你做了部分更新或一个完整的,但我会假设你正在做一个完全更新的另一个问题是,你在哪里得到来自更新信息? ,为了简洁起见,我假设你从页面上的表单或ajax调用中获得外部信息。

您可以通过循环访问用户数组来更新用户,并使用与更新信息相同的ID查找用户。那么只需将该用户设置为新的更新信息即可。此方法将取代所有信息。

是这样的:

$scope.updateUserFull = function(updatetUser){ 


     for (var i = 0; i < $scope.users.length; i++) { 

      if ($scope.users[i].id === updatetUser.id) { 

        $scope.users[i] = updatetUser; 
      } 

     } 

     //console.log($scope.users.indexOf(user), user, index); 
    }; 

然后把一切都为了使用排序依据过滤

ng-repeat="user in users | orderBy:'id'" 

如果你想更新从NG重复创建列表中的用户阵列 那么你可以做到这一点

$scope.updateUserFullFromNgRepeat = function(updatedUser, index){ 

    var idx = index; 
    var usr = user; 


    $scope.users[idx] = usr; 
}; 

并通过t他指数这样

updateUserFull(user,$index) 

,如果你尝试将部分更新张贴cfprabhu的解决方案应该工作

这里是一个工作普拉克演示

http://plnkr.co/edit/rJDKKfdRYJ0NB2iI6PVY?p=preview

V2

http://plnkr.co/edit/ms3QHkxfmJsqxJ6ILMeI?p=preview

+0

好吧,帮助调整视图。谢谢,更新部分呢? – aintno12u

+0

当你说更新正在插入一个新的用户到你的用户阵列中,或者你是否正在改变现有用户的数据? – TimCodes

+0

更改现有用户的数据 – aintno12u