已更新
这是使用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>