Question

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

当用户点击任何城市时，应使用城市数据呈现表格。用户第一次点击城市时，它可以正常工作，但第二次没有更新DOM。

我已经多次查看了我的代码，并且没有找到任何丢失的数据或链接断开。我正在使用ng-table生成表。请帮忙

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

Answer 1

如果我理解正确，这就是您正在寻找的。请参阅下面的演示，此处为jsFiddle。

我已在每个城市添加了一个标记detailsVisible，以便跟踪是否显示详细信息，并显示表格的标题我已经包含了一个自定义标题模板来实现此功能（过滤条件）还没有工作。）

＆＃13;

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

＆＃13;

<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>

＆＃13;

ng-table DOM未使用数据更新进行更新

1 个答案: