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

时间:2015-02-05 11:08:38

标签: javascript angularjs

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

这是加载功能

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

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

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

谢谢,

2 个答案:

答案 0 :(得分:0)

您可以在开始$ 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)
}


   }

答案 1 :(得分:0)

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

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