更新对象分隔视图 - 角度

时间:2015-10-24 08:20:14

标签: javascript angularjs

已更新

这是使用Angular UI Grid //结束更新

导致的问题

我正在尝试更新PUT更新单个对象后对对象数组所做的更改。

我尝试了各种解决方案似乎有效,但最终打破了观点。问题可能是我正在使用模态,所以我在.html页面上以不同的方式定义$ scope。

加载页面时,我收到所有用户的外观并将其添加到:

$scope.userLooks = data;

当用户点击编辑按钮时,它会显示填充了$scope.editLook

字段的模式
$scope.editLook = function(look) {
  looksAPI.getUpdateLook(look)
    .then(function(data) {
      $scope.editLook = data.data;
    }, function(err) {
      console.log('failed to get look ', err);
    });
}

我能够保存数据,以便在后端更新但是在将此新对象更新为原始对象数组时遇到问题

$scope.saveLook = function() {
  var look = $scope.editLook;

  looksAPI.updateLook(look)
    .then(function(data) {
      console.log(data);
      alertSuccess.show();
    }, function(err) {
      alertFail.show();
    });
}

我尝试过不同的代码,例如下面的代码,它应该迭代原始对象,看看是否有任何更改,然后相应地更新。

      .then(function(data) {
      angular.forEach($scope.userLooks, function(u, i) {
        if (u._id === look._id) {
          $scope.userLooks[i] = data;
        }
      })

还尝试在PUT之后传递GET请求,结果是相同的断开视图。

这是我的模态视图:

  <div class="form-group">
    <label for="title">Title</label>
      <input type="text"
              class="form-control title-input"
              placeholder="{{ editLook.title }}"
              ng-model="editLook.title" />
  </div>

  <div class="form-group">
    <div class="row listing-description-row">
    <label for="description"
              class="col-xs-12">Description</label>
      <textarea type="text"
              class="form-control description-textarea"
              placeholder="{{ editLook.description }}"
              ng-model="editLook.description"
              rows="3" />
        </div>
      </div>

使用Angular Grid的mylook视图。

<ul class="dynamic-grid angular-grid"
          angular-grid="looks"
          grid-width="300"
          gutter-size="10"
          angular-grid-id="gallery"
          refresh-on-img-load="true" >
      <li data-ng-repeat="look in userLooks"
          class="grid"
          ng-cloak>
        <a ui-sref="look ({ lookId: look._id })"
            class="lookLink">
          <img ng-src="{{ look.image }}"
                  class="grid-img"
                  data-actual-width="{{ look.actualWidth }}"
                  data-actual-height="{{ look.actualHeight }}" />
          <div class="look-description-trim">
            {{ look.description.substr(0,100) }}
          </div>

          <div class="titleClass">
            {{ look.title }}
          </div>
        </a></li></ul>

0 个答案:

没有答案