初入angularJS [2]

最新推荐文章于 2025-08-19 17:32:45 发布

转载最新推荐文章于 2025-08-19 17:32:45 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuluhuang/p/3499575.html

文章标签：

#javascript #ViewUI

本文展示了一个使用AngularJS实现的简单示例，该示例包括自动筛选与排序功能。通过输入文本，用户可以筛选出匹配的数据，并且列表能够根据名称进行排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自动筛选

 1 <!DOCTYPE html>
 2 <html ng-app="demoApp">
 3 <head>
 4     <title></title>
 5     <script src="./angular-1.0.1.min.js"></script>
 6 </head>
 7 <body>
 8 <div ng-controller="SimpleController">
 9     Name:<br/>
10     <input type="text" ng-model="name" /><br/>
11     <ul>
12         <li ng-repeat="cust in customers | filter:name | orderBy:'name'">{{cust.name}}</li>
13 
14     </ul>
15 </div>
16 <script>
17     var demoApp=angular.module("demoApp",[]);
18 function SimpleController($scope){
19     $scope.customers=[
20         {name:'John Smith',city:'Phoenix'},
21         {name:'John Doe',city:'New York'},
22         {name:'Jane Doe',city:'San Francisco'}
23     ];
24 
25 }
26 demoApp.controller('SimpleController',SimpleController);
27 </script>
28 
29 </body>
30 </html>