AngularJS在http之后更新ng-repeat中的单个模型答案

【问题标题】：AngularJS update single model in ng-repeat after httpAngularJS在http之后更新ng-repeat中的单个模型
【发布时间】：2016-10-19 00:23:03
【问题描述】：

我有一个应用程序的以下代码，它从 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);  
    });

};

是否可以使用来自 http 的响应数据保存数据并仅更新 ng-repeat 中的一项？

【问题讨论】：

标签： php angularjs http ng-repeat

【解决方案1】：

是的。只需将整个单个对象传递给 savedata 函数。在您的情况下，它是ng-repeat="myData in dataSet.phasen.item2"，因此您需要传递 mydata。

savedata(myData);

成功时只需将响应对象分配给 myData，它将在视图中自动更新，因为当您从 ng-repeat 传递整个对象时，它是通过引用而不是值传递的。

【讨论】：

【解决方案2】：

将您的 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);  
});

};

【讨论】：