Question

我有一个应用程序的以下代码，它从http。

加载数据

初始json-data：

"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中的一个项目？

Answer 1

是的。只需将整个单个对象传递给savedata函数即可。在你的情况下它是ng-repeat="myData in dataSet.phasen.item2"所以你需要传递mydata。

savedata(myData);

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

Answer 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);  
});

};

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

2 个答案: