AngularJS обновляет одну модель в ng-repeat после http
У меня есть следующий код для приложения, которое загружает данные из http.
Исходные данные json:
"phasen": {
"item1": false,
"item2": [{
"phasen_id": "1",
"phasen_group_id": "2",
"phasen_group_name": "groupx",
"phasen_name": "name1",
"phasen_data": {
"phasen_status": "1",
"user_modified_id": "10",
"user_modified_name": "Admin ",
"createdate": "17.06.2016 | 10:19"}
}, {
"phasen_id": "2",
"phasen_group_id": "2",
"phasen_group_name": "name2",
"phasen_data": false
}, {
"phasen_id": "3",
"phasen_group_id": "2",
"phasen_group_name": "name3",
"phasen_data": false
}
]
}
HTML-код:
<div ng-repeat="myData in dataSet.phasen.item2">
<div>
<input type="checkbox" ng-model="myData.phasen_data.phasen_status" ng-true-value="'1'" ng-false-value="'0'" ng-checked="myData.phasen_data.phasen_status == '1'" ng-change="savedata('{{myData.phasen_group_id}}','{{myData.phasen_id}}', myData.phasen_data.phasen_status)" icheck />
</div>
<div class="info-box-content">
<span class="info-box-text">{{myData.phasen_name}}</span>
<span class="info-box-number">
<div ng-show="myData.phasen_data.phasen_status == '1'" class="small">{{myData.phasen_data.createdate}} | {{myData.phasen_data.user_modified_name}}</div>
</span>
</div>
</div>
И Javascript:
$scope.savedata = function(phasen_group_id, phasen_id, phasen_status){
$http({
method: 'POST',
url: base_url + "dataapi/savedata/",
data: { 'phasen_group_id': phasen_group_id, 'phasen_id': phasen_id, 'phasen_status': phasen_status},
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json; charset=utf-8'
}
}).then(function(response){
var data = response.data;
console.log(data);
$parse('dataSet.phasen').assign($scope, data);
});
};
Можно ли сохранить данные и обновить только один элемент в ng-repeat с данными ответа из http?
Решение
Да, это. Просто передайте весь отдельный объект в функцию сохраненных данных.
В вашем случае это ng-repeat="myData in dataSet.phasen.item2" так что вам нужно передать mydata.
savedata(myData);
В случае успеха просто назначьте объект ответа myData, и он будет автоматически обновлен в представлении, потому что когда вы передаете весь объект из ng-repeat, он передается по ссылке, а не по значению.
Другие решения
Измените свой HTML на:
<div ng-repeat="myData in dataSet.phasen.item2">
<div>
<input type="checkbox" ng-model="myData.phasen_data.phasen_status" ng-true-value="'1'" ng-false-value="'0'" ng-checked="myData.phasen_data.phasen_status == '1'" ng-change="savedata(myData)" icheck />
</div>
<div class="info-box-content">
<span class="info-box-text">{{myData.phasen_name}}</span>
<span class="info-box-number">
<div ng-show="myData.phasen_data.phasen_status == '1'" class="small">{{myData.phasen_data.createdate}} | {{myData.phasen_data.user_modified_name}}</div>
</span>
</div>
И ваш JavaScript:
$scope.savedata = function(myData){
$http({
method: 'POST',
url: base_url + "dataapi/savedata/",
data: myData
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json; charset=utf-8'
}
}).then(function(response){
var data = response.data;
console.log(data);
$parse('dataSet.phasen').assign($scope, data);
});
};