在AngularJS中插入后重新加载列表

reloading list after insert in AngularJS

本文关键字：加载列表新加载 AngularJS 插入更新时间：2023-09-26

我正在执行插入和更新，在单词后面我想重新加载项目列表，但它在视图中复制了它。

这是的加载函数

// Listing contact resources
    $scope.load = function () {
        var g = $rdf.graph();
        var f = $rdf.fetcher(g);
        f.nowOrWhenFetched($scope.path + '*',undefined,function(){  
            var DC = $rdf.Namespace('http://purl.org/dc/elements/1.1/');
            var RDF = $rdf.Namespace('http://www.w3.org/1999/02/22-rdf-syntax-ns#');
            var LDP = $rdf.Namespace('http://www.w3.org/ns/ldp#');
            //var myOntology = $rdf.Namespace('http://user.pds.org/ontology/'); 
            var VCARD = $rdf.Namespace('http://www.w3.org/2006/vcard/ns#');
            var evs = g.statementsMatching(undefined, RDF('type'), VCARD('Individual'));
            if (evs != undefined) {
                for (var e in evs) {
                    var id = evs[e]['subject']['value'];
                    var fullname = g.anyStatementMatching(evs[e]['subject'], VCARD('fn'))['object']['value'];
                    var email = g.anyStatementMatching(evs[e]['subject'], VCARD('hasEmail'))['object']['value'];
                    var phone = g.anyStatementMatching(evs[e]['subject'], VCARD('hasTelephone'))['object']['value'];
                    var contact = {
                        id: id.slice(id.length-1),
                        fullname: fullname,
                        email: email,
                        phone: phone 
                    };
                    $scope.contacts.push(contact);
                    $scope.$apply();
                }
            }
        });
    };

这是插入/更新功能

    // Function to insert or update a contact resource
    $scope.insertContact = function (contact) {
        var uri = $scope.path + $scope.prefix + contact.id;
        var resource = $scope.composeRDFResource(contact, uri);
        $http({
          method: 'PUT', 
          url: uri,
          data: resource,
          headers: {
            'Content-Type': 'text/turtle',
            'Link': '<http://www.w3.org/ns/ldp#Resource>; rel="type"'
          },
          withCredentials: true
        }).
        success(function(data, status, headers) {
          if (status == 200 || status == 201) {
            console.log('Success: Resource created.');
            // Update view
            $scope.load();
          }
        }).
        error(function(data, status) {
          if (status == 401) {
            console.log('Forbidden: Authentication required to create new resource.');
          } else if (status == 403) {
            console.log('Forbidden: You are not allowed to create new resource.');
          } else {
            console.log('Failed '+ status + data);
          }
        });
    };

两者都能正常工作，但当在插入中调用load时，它会将重新加载的新项目与列表中的旧项目一起添加。

在重新加载之前/期间清空列表的位置？

谢谢，

您应该在"加载"新项目之前清空列表。

.success(function(data, status, headers) {
    if (status == 200 || status == 201) {
        console.log('Success: Resource created.');
        // Update view
        $scope.contacts.length = 0;
        $scope.load();
    }
})

您可以在开始$scope.load函数时清空联系人列表，即：

$scope.load = function () {
    //here
    $scope.contacts = []
    var g = $rdf.graph();
    var f = $rdf.fetcher(g);
    ...
}

但我建议你只将新联系人添加到列表中，而不是在你的成功回电更新后重新加载所有列表

success(function(data, status, headers) {
              if (status == 200 || status == 201) {
                console.log('Success: Resource created.');
                // Update view
                //instated of reloading all list
                //$scope.load();
                //just add new contact
                $scope.push(contact)
}

   }