ng表DOM未使用数据更新进行更新

ng-table DOM not updating with data update

本文关键字：更新 数据 未使用 DOM ng      更新时间：2024-01-15

我有一个导航，其中包含通过angular生成的城市列表。每个城市都有绑定的数据。

当用户单击任何城市时，都应该使用该城市的数据来呈现一个表。当用户第一次点击city时，它运行良好，但第二次不更新DOM。

我已经检查了我的代码多次，没有发现任何丢失的数据或断开的链接。我正在使用ng表来生成表。请帮助

 function createTable(data){
    var table =  new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
        total: data.length, // length of data
        counts:[],
        getData: function($defer, params) {
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
    return table;
}

如果我理解正确，这就是您想要的。请参阅下面和jsFiddle上的演示。

我为每个城市添加了一个标志detailsVisible，以跟踪是否显示了详细信息，并显示表的标题。我还包括了一个自定义的标题模板来实现这一点（过滤器还不起作用）。

var app = angular.module('myApp', ['ngTable']);
app.controller('MainCtrl', ['$scope', 'ngTableParams', '$window', function ($scope, ngTableParams, $window) {
    var vm = this;
    
    this.cities = [{
        name: 'New York',
        detailsVisible: false,
        more_details: {
            population: 8400000,
            coordinates: '40.712778°, -74.005833°'
        }
    }, {
        name: 'Honolulu',
        detailsVisible: false,
        more_details: {
            population: 1400000,
            coordinates: '19.566667°, -155.5°'
        }
    }, {
        name: 'London',
        detailsVisible: false,
        more_details: {
            population: 8400000,
            coordinates: '51.50939°, -0.11832°'
        }
    }, ];
    function createTable(data) {
        var table = new ngTableParams({
            page: 1, // show first page
            count: 10 // count per page
        }, {
            total: data.length, // length of data
            counts: [],
            getData: function ($defer, params) {
                $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });
        return table;
    }
    $scope.tableParams = createTable(this.cities);
    $scope.columns = [{
        title: 'City',
        field: 'city',
        visible: true,
        filter: {
            'name': 'text'
        },
    }, {
        title: 'Population',
        field: 'pop',
        visible: false,
        isDetailTitle: true
    },
                           {
        title: 'Coordinates',
        field: 'coords',
        visible: false,
        isDetailTitle: true
    }];
    this.showDetails = function (city) {
        city.detailsVisible = !city.detailsVisible;
    
        // the following code is only needed to display the titles
        var changeDetailsTitle = function(visiblity) {
            _.each($scope.columns, function(obj, index) {
                //console.log(obj);
                if (obj.isDetailTitle) obj.visible = visiblity;
            });
        };
        changeDetailsTitle(true);
        
    if (_.every(this.cities, function(item) {
            return !item.detailsVisible;
        })) {
            // hide title if no city details are visible
            changeDetailsTitle(false);
        };
    };
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.js"></script>
<base href="/">
<div ng-app="myApp">
<script id="sample_ng_header" type="text/ng-template">
    <tr> <th ng-repeat = "column in columns"
    ng-show = "column.visible"
    class = "text-center sortable"
    ng-class = "{
              'sort-asc': tableParams.isSortBy(column.field, 'asc'),
              'sort-desc': tableParams.isSortBy(column.field, 'desc')
            }"
    ng-click = "tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" > {{column.title}} </th></tr>
</script>
<div ng-controller="MainCtrl as main">
    <p><strong>Page:</strong> {{tableParams.page()}}</p>
    <p><strong>Count per page:</strong> {{tableParams.count()}}</p>
    <table ng-table="tableParams" class="table" template-header="sample_ng_header">
        <tr ng-repeat="city in $data">
            <td data-title="'City'">
                <button ng-click="main.showDetails(city)">{{city.name}}</button>
            </td>
            <td ng-if="city.detailsVisible">{{city.more_details.population}}</td>
            <td ng-if="city.detailsVisible">{{city.more_details.coordinates}}</td>
        </tr>
    </table>
</div>
</div>

相关文章：