creating a table in ionic

后端 未结 9 1299
一向
一向 2021-01-31 03:27

I am in need of creating a table in Ionic. I thought of using Ionic grid but could not achieve what I wanted. How can I do this? Here is an image of something similar to what i

9条回答
  •  南笙
    南笙 (楼主)
    2021-01-31 03:45

    The flexbox grid should do what you want. You're not clear as to what limitation you ran into, so it's hard to address your specifics.

    Here's a codepen with a working sample that generates your table with the first couple rows and a header: http://codepen.io/anon/pen/pjzKMZ

    HTML

    
    
    
        
        
    
        Ionic Template
    
        
        
     
    
      
        
            

    Service Provider Details

    Utility Company Name
    Service Code
    Pay Limit
    Account Number to Use
    {{data.name}}
    {{data.code}}
    LK {{data.limit}}
    {{data.account}}

    CSS

    body {
        cursor: url('http://ionicframework.com/img/finger.png'), auto;
    }
    
    .header .col {
        background-color:lightgrey;
    }
    
    .col {
        border: solid 1px grey;
        border-bottom-style: none;
        border-right-style: none;
    }
    
    .col:last-child {
        border-right: solid 1px grey;
    }
    
    .row:last-child .col {
        border-bottom: solid 1px grey;
    }
    

    Javascript

    angular.module('ionicApp', ['ionic'])
    
    .controller('MyCtrl', function($scope) {
    
        var ctrl = this;
    
        ctrl.add = add;
        ctrl.data = [
            {
                name: "AiA",
                code: "AI101",
                limit: 25000,
                account: "Life Insurance"
            },
            {
                name: "Cargills",
                code: "CF001",
                limit: 30000,
                account: "Food City"
            }
        ]
    
        ////////
        function add(index) {
            window.alert("Added: " + index);
        }
    });
    

提交回复
热议问题