zoukankan      html  css  js  c++  java
  • Angular 学习笔记——ng-repeat&filter

    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="js/angular-1.3.0.js"></script>
        <script>
            var m1 = angular.module('myApp',[]);
            m1.controller('may',['$scope','$filter',function($scope,$filter){
                var oriArr = [
                    { name : "red" , age : "20" },
                    { name : "yellow" , age : "40" },
                    { name : "blue" , age : "30" },
                    { name : "green" , age : "10" }
                ];
                $scope.datelist = oriArr;
    
                $scope.fnSort = function(arg){
                    arguments.callee['fnSort'+arg] = !arguments.callee['fnSort'+arg]
                    $scope.datelist = $filter('orderBy')($scope.datelist,arg,arguments.callee['fnSort'+arg]);
                };
    
                $scope.filterfind = function (){
                    $scope.datelist = $filter('filter')(oriArr,$scope.filterVal);
                }
    
            }])
        </script>
    </head>
    <body ng-controller='may'>
        <input type="text" ng-model="filterVal"><button ng-click="filterfind()">search</button>
        <table border="1">
            <tr>
                <th ng-click="fnSort('name')">姓名</th>
                <th ng-click="fnSort('age')">年龄</th>
            </tr>
            <tr ng-repeat="date in datelist">
                <td>{{date.name}}</td>
                <td>{{date.age}}</td>
            </tr>
        </table>
    </body>
    </html>
  • 相关阅读:
    【LOJ#6277】数列分块1
    【LOJ6284】数列分块8
    【洛谷P3275】糖果
    【洛谷P3810】陌上花开
    【洛谷P1052】过河 离散化+dp
    【洛谷P2042】维护数列
    【模板】文艺平衡树
    【洛谷P4145】花神游历各国
    【洛谷P4878】布局
    hdu 5748(LIS)
  • 原文地址:https://www.cnblogs.com/mayufo/p/4989901.html
Copyright © 2011-2022 走看看