angular.js滤波器具有动态和缺省值 [英] angular.js filter has dynamic and default value
问题描述
这是我的code，根据这里。 limitTo 是动态的，从用户输入获取其值。
＆LT;脚本＆GT;
VAR每月= 123.659855，89.645222，97.235644，129.555555]
功能MyFilterDemoCtrl（$范围）{$ scope.monthly =月;};
＆LT; / SCRIPT＆GT;＆LT;机身NG控制器=MyFilterDemoCtrl＆GT;
民：其中，输入NG模型=数类型=文本/＆GT;
＆LT;李NG重复=每月千兆字节| limitTo：NUM＆GT; {{}千兆}＆LT; /李＆GT;
＆LT;身体GT;
我不知道我怎样才能改变 limitTo 过滤这样的
＆LT;李NG重复=千兆字节每月| limitTo：monthly.lenght（）或num＆GT;
因此，当页面加载（输入为空）显示在阵列中的所有项目，并当用户输入号码时，显示的项目适量。
（页面加载，所有项目显示，然后用户类型3，只有第3项出现）
为了让完美，我想知道，当输入超过数组lenght我如何可以打印一个信息给用户。
在此先感谢
修改
code，因为它是现在，不能显示所有项目，然后重新显示用户输入。显示所有页面加载时，唯一的办法就是做
由$指数月度跟踪千兆字节| limitTo：NUM
但随后的用户输入不起作用。我用角1.2.28。我不通过$指数实际获得轨道的概念。再次感谢
如果您使用的是棱角分明的版本，直到1.4，你需要做的：
＆LT;李NG重复=千兆字节每月| limitTo：NUM || monthly.length＆GT; {{}千兆}＆LT; /李＆GT;
angular.module（应用，[]）。控制器（'MyFilterDemoCtrl ，MyFilterDemoCtrl）;\r
\r
\r
功能MyFilterDemoCtrl（$范围）{\r
$ scope.monthly = 123.659855，89.645222，97.235644，129.555555]\r
}; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.js\"></script>\r
\r
\r
＆LT;机身NG-应用=应用程序NG控制器=MyFilterDemoCtrlNG-的init =VM = {}＆GT;\r
编号：\r
＆LT;输入NG模型=vm.num类型=文本/＆GT;\r
＆LT; UL＆GT;\r
＆LT;李NG重复=千兆字节每月| limitTo：由$指数vm.num || monthly.length轨道＆GT; {{}千兆}＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
\r
＆LT;身体GT; \r
使用1.4+它是内部处理的上检查 NaN的
限制为源代码片段从1.4： -
如果（Math.abs（编号（限制））===无限远）{
极限=号（限制）;
}其他{
极限= toInt（限制）;
}
如果（isNaN（限制））返回输入;
所以，你可以只是做你正在做什么：
＆LT;李NG重复=每月千兆字节| limitTo：NUM＆GT; {{}千兆}＆LT; /李＆GT;
angular.module（应用，[]）。控制器（'MyFilterDemoCtrl ，MyFilterDemoCtrl）;\r
\r
\r
功能MyFilterDemoCtrl（$范围）{\r
$ scope.monthly = 123.659855，89.645222，97.235644，129.555555]\r
}; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.4.3/angular.js\"></script>\r
\r
\r
＆LT;机身NG-应用=应用程序NG控制器=MyFilterDemoCtrlNG-的init =VM = {}＆GT;\r
编号：\r
＆LT;输入NG模型=vm.num类型=文本/＆GT;\r
＆LT; UL＆GT;\r
＆LT;李NG重复=千兆字节每月| limitTo：vm.num轨道由$指数＆GT; {{}千兆}＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
\r
＆LT;身体GT; \r
如果您使用的是 按部就班地进行， 前pression它应该在EX pression 年底，
请注意：通过跟踪必须始终是最后的前pression：
即
1.4
＆LT;李NG重复=每月千兆字节| limitTo：由$指数NUM轨道＆GT;或旧版本的
＆LT;李NG重复=千兆字节每月| limitTo：NUM || monthly.length轨道由$指数＆GT;This is my code, based here.
limitTois dynamic and gets its value from user input.<script> var monthly=[123.659855, 89.645222, 97.235644, 129.555555]; function MyFilterDemoCtrl($scope) {$scope.monthly= monthly;}; </script> <body ng-controller="MyFilterDemoCtrl" > Num: <input ng-model="num" type="text" /> <li ng-repeat="gigabytes in monthly | limitTo:num"> {{ gigabytes}} </li> <body>I was wondering how can I alter the
limitTofilter like this<li ng-repeat="gigabytes in monthly | limitTo:monthly.lenght() OR num">so when the page loads (input is empty) all the items of the array are displayed and when user types a number, the proper amount of items is displayed.
(page loads, all items displayed, then user types 3, only the first 3 items appear)
To make it "perfect" I would like to know how I can print a message to the user when the input exceeds the array lenght.
Thanks in advance
EDIT
Code as it is now , cannot display all items, and then redisplay user input. The only way to display all when page loads is to do
gigabytes in monthly track by $index | limitTo:numbut then the user input has no effect. I use angular 1.2.28. I dont actually get the concept of
track by $index. Thanks again解决方案If you are using angular versions until 1.4 you would need to do:
<li ng-repeat="gigabytes in monthly | limitTo:num || monthly.length">{{ gigabytes}}</li>angular.module('app', []).controller('MyFilterDemoCtrl', MyFilterDemoCtrl); function MyFilterDemoCtrl($scope) { $scope.monthly = [123.659855, 89.645222, 97.235644, 129.555555]; };
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script> <body ng-app="app" ng-controller="MyFilterDemoCtrl" ng-init="vm={}"> Num: <input ng-model="vm.num" type="text" /> <ul> <li ng-repeat="gigabytes in monthly | limitTo:vm.num || monthly.length track by $index">{{ gigabytes}}</li> </ul> <body>
With 1.4+ it is handled internally with a check on
NaNLimit To source snippet from 1.4:-
if (Math.abs(Number(limit)) === Infinity) { limit = Number(limit); } else { limit = toInt(limit); } if (isNaN(limit)) return input;So you could just do what you are doing currently:
<li ng-repeat="gigabytes in monthly | limitTo:num"> {{ gigabytes}} </li>angular.module('app', []).controller('MyFilterDemoCtrl', MyFilterDemoCtrl); function MyFilterDemoCtrl($scope) { $scope.monthly = [123.659855, 89.645222, 97.235644, 129.555555]; };
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> <body ng-app="app" ng-controller="MyFilterDemoCtrl" ng-init="vm={}"> Num: <input ng-model="vm.num" type="text" /> <ul> <li ng-repeat="gigabytes in monthly | limitTo:vm.num track by $index">{{ gigabytes}}</li> </ul> <body>
If you are using
track byexpression it should come in the end of the expression,Note: track by must always be the last expression:
i.e.
for 1.4
<li ng-repeat="gigabytes in monthly | limitTo:num track by $index">or for older versions
<li ng-repeat="gigabytes in monthly | limitTo:num || monthly.length track by $index">
这篇关于angular.js滤波器具有动态和缺省值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
