Question

我正在使用具有静态JSON用户的IONIC创建一个Android应用程序记录数据，如下所示：

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

  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等于我插入的内容但是我插入的记录将其位置更改为我的显示记录列表的底部。我想知道的是，无论如何（可能的方式）我可以更新记录而不会搞砸了吗？就像当我查看第二条记录时，它将一些数据混合到第一条记录中:(。我只想更新，就像数据库查询更新FROM 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>

Answer 1

不确定您是进行部分更新还是完整更新，但我会假设您正在进行全面更新。另一个问题是你从哪里获得更新信息？为了简洁起见，我假设您从页面上的表单或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);
    };

然后按顺序保留所有内容使用orderby过滤器

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

如果您尝试从ng-repeat中创建的列表更新用户数组然后你可以这样做

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

     var idx = index;
     var usr = user;


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

并像这样传递索引

updateUserFull(user,$index)

如果您尝试部分更新，cfprabhu发布的解决方案应该可以正常工作

这是一个有效的插件演示

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

V2

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

如何通过id更新离子中的JSON记录

1 个答案: