Thứ Ba, 12 tháng 6, 2018

[Làm web bằng Flask và Angurlar + Mongodb]

https://codehandbook.org/creating-a-web-app-using-angularjs-python-mongodb/
https://www.js-tutorials.com/javascript-tutorial/angularjs-tutorial/angularjs-smart-table-add-edit-delete-records/
https://www.tutorialspoint.com/angularjs/angularjs_login_application.htm
https://codepen.io/team/AngularMaterial/project/editor/XJYdQn
https://techarena51.com/blog/how-to-build-database-driven-restful-api-applications-with-flask-flask-restful-and-angularjss-resource-service/
https://github.com/Leo-G/Flask-Scaffold
https://codepen.io/khilnani/pen/qEWojX

var app=angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';
   
    $scope.getData = function () {
      return $filter('filter')($scope.data, $scope.q)
    }
   
    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);               
    }
    $scope.data =  [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];
    // for (var i=0; i<65; i++) {
    //     $scope.data.push("Item "+i);
    // }
}]);
app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});


<div ng-app="myApp" ng-controller="MyCtrl">
    <input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<!--     <select ng-model="pageSize" id="pageSize" class="form-control">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
     </select> -->
    <ul>
        <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
            {{item}}
        </li>
    </ul>
    <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button>
    {{currentPage+1}}/{{numberOfPages()}}
    <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>
</div>