[Angular] Angular Search filter, built-in filters, ng-repeat
Angular in filter search NG repeat Filters built
2023-09-14 08:59:21 时间
<!DOCTYPE html> <html> <head> <title>Angular Binding</title> <script src="angular.min.js"></script> <script src="main.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="FirstCtrl"> <input type="text" ng-model="msg.message" /> <h1>{{msg.message}}</h1> </div> <div ng-controller="SkillsCtrl"> <!--<input type="search" ng-model="searchName" /> search string--> <!--<input type="search" ng-model="search.$" /> search everything in the object--> <input type="search" ng-model="search.name"/> <table> <tr ng-repeat="skill in skills.cast | filter:search"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>
<!--<tr ng-repeat="skill in skills.cast | filter:{skill:skill.nanme}"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>-->
</table> </div> </div> </body> </html>
//$scope is an area which can affected /* function FirstCtrl($scope){ $scope.data = {message: "Hello"}; }*/ var app = angular.module('myApp', []); app.factory('DataFromService', function(){ return {message: "This is from service"} }); app.factory('Skills', function(){ var skills = {}; skills.cast = [ {'name': "Hadoop", "icon": "", "level": "Learning"}, {'name': "Angular JS", "icon": "", "level": "Good"}, {'name': "Backbone.js", "icon": "", "level": "Good"}, {'name': "Node.js", "icon": "", "level": "Good"}, {'name': "Javascript", "icon": "", "level": "Good"}, {'name': "jQuery", "icon": "", "level": "Good"}, {'name': "PHP", "icon": "", "level": "Good"}, {'name': "Java SE", "icon": "", "level": "Good"}, {'name': "Android", "icon": "", "level": "Good"}, {'name': "HTML5", "icon": "", "level": "Good"}, {'name': "CSS3", "icon": "", "level": "Good"}, {'name': "MySQL", "icon": "", "level": "Good"}, {'name': "MongoDB", "icon": "", "level": "Good"}, {'name': "Python", "icon": "", "level": "Know"}, {'name': "Linux", "icon": "", "level": "Know"}, {'name': "C#", "icon": "", "level": "Know"}, {'name': "JSP", "icon": "", "level": "Know"}, {'name': "Servlet", "icon": "", "level": "Know"}, {'name': "JSP", "icon": "", "level": "Know"}, {'name': "Servlet", "icon": "", "level": "Know"} ]; return skills; }); app.filter('reverse', function(DataFromService){ return function(text){ return text.split(" ").reverse().join(" "); } }); function SkillsCtrl($scope, Skills){ $scope.skills = Skills; } function FirstCtrl($scope, DataFromService){ /*DataFromService: Object {message: "This is from service", reply: "I am Zhentian"} */ $scope.msg = DataFromService; }
-----------------------------Built-in Filters-------------------------
<tr ng-repeat="skill in skills.cast | orderBy: 'name' | filter:search"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr> <!--<tr ng-repeat="skill in skills.cast | limitTo: 5 | orderBy: 'name'"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>--> <!--<tr ng-repeat="skill in skills.cast | limitTo: -5"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>--> <!--<tr ng-repeat="skill in skills.cast | limitTo: 5"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>--> <!--<tr ng-repeat="skill in skills.cast | orderBy: '-name'"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>--> <!--<tr ng-repeat="skill in skills.cast | filter:search"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>-->
相关文章
- Angular: 最佳实践
- 关于 Angular HTTP Interceptor 中 Request 和 Response 的 immutable 特性
- Angular面试题_session面试题
- vue相比jquery_angular和vue哪个厉害
- uat环境和生产环境的区别_angular 生产环境 相对路径无效
- orbital angular momentum_omnidirectional
- Angular Universal 应用避免 SSR hang 的一些指导方针
- Angular RouterModule.forRoot(ROUTES) 和 forChild(ROUTES)的区别
- Angular forRoot 方法的使用场合介绍
- 一款开源的 Angular Storefront 应用介绍,代号 Spartacus 诞生的历史背景
- Angular与React、Vue.js的对比
- 和in的区别深入研究MySQL查询条件中的=与IN的区别(mysql查询条件中)
- 限制Oracle IN语句元素数量限制(oracle的in个数)
- Angular 2对 React:究竟孰优孰劣?
- 子查询MySQL联表IN子查询:实现跨表快速查询(mysql联表in)
- 利用Oracle中IN函数进行数据查询(oracle带in函数)
- 查询解锁Oracle多条件In查询的机密(oracle多条件in)
- 语句SQL Server中使用IN语句处理多值查询(sqlserver中in)
- MySQL中的Out和In操作一个简单的指南(mysql中out in)
- 深入分析MySQL中IN语句的性能问题(mysql中in性能分析)
- 基于豆瓣API+Angular开发的webApp