IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    [原]angularjs 删除循环中的 promise 数据之后立马显示变化

    qcpm1983发表于 2015-02-03 15:22:39
    love 0

    在用 restangurlar 来跟后台 api 交互的时候,删除一条记录,但是直接显示在页面中。第三方异步的数据没办法立即同步,如果要看到删除的结果要重新刷新页面的话就太不 cool 了,google 了一把找到解决方法。

    原始 js 代码如下:

    .controller('HostCtrl', ['$scope','Restangular',function($scope,Restangular) {
        var baseHosts = Restangular.all('api/host');
    
        $scope.hosts=baseHosts.getList().$object;
    
        $scope.del=function(host,uuid){
            Restangular.one('api/host',uuid).remove()
            }
    }])
    

    html:

    <tbody>
    <tr ng-repeat="host in hosts|filter:searchText">
        <td><a href="#" ng-if="host.Uuid!=nil" ng-click="del(host,host.Uuid)">deletea> td>
        <td class="center">{{host.Hostname}}td>
        <td class="center">{{host.Ip}}td>
        <td><p ng-repeat="tcp_port in host.Tcp_list">{{tcp_port}}p>td>
        <td><p ng-repeat="udp_port in host.Udp_list">{{udp_port}}p>td>
    tr>
    tbody>
    

    修改后的 js 代码如下:

    .controller('HostCtrl', ['$scope','Restangular',function($scope,Restangular) {
        var baseHosts = Restangular.all('api/host');
    
        $scope.hosts=baseHosts.getList().$object;
    
        $scope.del=function(host,uuid){
            Restangular.one('api/host',uuid).remove().then(function(){
                var index=$scope.hosts.indexOf(host);
                if(index > -1) $scope.hosts.splice(index,1);
            })
            }
    }])


沪ICP备19023445号-2号
友情链接