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>
  • 相关阅读:
    作业5,6 2019/10/23
    作业1、2、3、4 2019/10/23
    实现Map传参Mybatis
    maven工程配置pom.xml实现mybatis的访问数据库操作
    测试
    Postman篇之命令行测试
    unittest框架
    测试
    测试
    测试
  • 原文地址:https://www.cnblogs.com/mayufo/p/4989901.html
Copyright © 2011-2022 走看看