{"id":3103,"date":"2023-11-14T15:21:49","date_gmt":"2023-11-14T07:21:49","guid":{"rendered":""},"modified":"2023-11-14T15:21:49","modified_gmt":"2023-11-14T07:21:49","slug":"AngularJS \u8fc7\u6ee4\u5668","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/3103.html","title":{"rendered":"AngularJS \u8fc7\u6ee4\u5668"},"content":{"rendered":"
\n

AngularJS \u8fc7\u6ee4\u5668<\/h1>\n<\/div>\n
\n \u8fc7\u6ee4\u5668\u7528\u4e8e\u4fee\u6539\u6570\u636e\u3002\u5b83\u4eec\u53ef\u4ee5\u4f7f\u7528\u7ad6\u7ebf (|) \u5b57\u7b26\u5728\u8868\u8fbe\u5f0f\u6216\u6307\u4ee4\u4e2d\u52a0\u5165\u3002\u4ee5\u4e0b\u5217\u8868\u663e\u793a\u4e86\u5e38\u7528\u7684\u8fc7\u6ee4\u5668\u3002\n<\/div>\n\n\n\n\n\n\n\n\n
\u5148\u751f\u53f7<\/td>\n\u540d\u79f0\u548c\u63cf\u8ff0<\/td>\n<\/tr>\n
1<\/td>\n\n
\n uppercase<\/b>\n <\/div>\n
\n \u5c06\u6587\u672c\u8f6c\u6362\u4e3a\u5927\u5199\u6587\u672c\u3002\n <\/div>\n<\/td>\n<\/tr>\n
2<\/td>\n\n
\n lowercase<\/b>\n <\/div>\n
\n \u5c06\u6587\u672c\u8f6c\u6362\u4e3a\u5c0f\u5199\u6587\u672c\u3002\n <\/div>\n<\/td>\n<\/tr>\n
3<\/td>\n\n
\n currency<\/b>\n <\/div>\n
\n \u4ee5\u8d27\u5e01\u683c\u5f0f\u683c\u5f0f\u5316\u6587\u672c\u3002\n <\/div>\n<\/td>\n<\/tr>\n
4<\/td>\n\n
\n filter<\/b>\n <\/div>\n
\n \u6839\u636e\u63d0\u4f9b\u7684\u6761\u4ef6\u5c06\u6570\u7ec4\u8fc7\u6ee4\u4e3a\u5b83\u7684\u4e00\u4e2a\u5b50\u96c6\u3002\n <\/div>\n<\/td>\n<\/tr>\n
5<\/td>\n\n
\n orderby<\/b>\n <\/div>\n
\n \u6839\u636e\u63d0\u4f9b\u7684\u6761\u4ef6\u5bf9\u6570\u7ec4\u8fdb\u884c\u6392\u5e8f\u3002\n <\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u5927\u5199\u8fc7\u6ee4\u5668<\/h2>\n
\n \u4f7f\u7528\u7ba1\u9053\u5b57\u7b26\u5411\u8868\u8fbe\u5f0f\u6dfb\u52a0\u5927\u5199\u8fc7\u6ee4\u5668\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u6dfb\u52a0\u4e86\u5927\u5199\u8fc7\u6ee4\u5668\uff0c\u4ee5\u5168\u90e8\u5927\u5199\u5b57\u6bcd\u6253\u5370\u5b66\u751f\u59d3\u540d\u3002\n<\/div>\n
\n
Enter first name:<input type = \"text\"<\/span><\/span> ng-model = \"student.firstName\"<\/span>>\nEnter last name: <input type = \"text\" ng-model = \"student.lastName\"<\/span>>\nName in Upper Case: {{student.fullName<\/span>() | uppercase}}\n<\/pre>\n
<\/code>\n<\/div>\n
\u5c0f\u5199\u8fc7\u6ee4\u5668<\/h2>\n
\n  \u4f7f\u7528\u7ba1\u9053\u5b57\u7b26\u5411\u8868\u8fbe\u5f0f\u6dfb\u52a0\u5c0f\u5199\u8fc7\u6ee4\u5668\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u6dfb\u52a0\u4e86\u5c0f\u5199\u8fc7\u6ee4\u5668\uff0c\u4ee5\u5168\u90e8\u5c0f\u5199\u5b57\u6bcd\u6253\u5370\u5b66\u751f\u59d3\u540d\u3002\n<\/div>\n
\n
Enter first name:<input type = \"text\"<\/span><\/span> ng-model = \"student.firstName\"<\/span>>\nEnter last name: <input type = \"text\" ng-model = \"student.lastName\"<\/span>>\nName in Lower Case: {{student.fullName<\/span>() | lowercase}}\n<\/pre>\n
<\/code>\n<\/div>\n
\u8d27\u5e01\u8fc7\u6ee4\u5668<\/h2>\n
\n  \u5c06\u8d27\u5e01\u8fc7\u6ee4\u5668\u6dfb\u52a0\u5230\u4f7f\u7528\u7ad6\u7ebf\u5b57\u7b26\u8fd4\u56de\u6570\u5b57\u7684\u8868\u8fbe\u5f0f\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u6dfb\u52a0\u4e86\u8d27\u5e01\u8fc7\u6ee4\u5668\uff0c\u4ee5\u4f7f\u7528\u8d27\u5e01\u683c\u5f0f\u6253\u5370\u8d39\u7528\u3002\n<\/div>\n
\n
Enter fees: <input type = \"text\"<\/span> ng-model = \"student.fees\"<\/span>>\nfees: {{student.fees | currency}}\n<\/pre>\n
<\/code>\n<\/div>\n
\u8fc7\u6ee4\u5668<\/h2>\n
\n  \u4e3a\u4e86\u4ec5\u663e\u793a\u5fc5\u9700\u7684\u4e3b\u9898\uff0c\u6211\u4eec\u4f7f\u7528 subjectName \u4f5c\u4e3a\u8fc7\u6ee4\u5668\u3002\n<\/div>\n
\n
Enter subject: <input type = \"text\"<\/span> ng-model = \"subjectName\"<\/span>>\nSubject:\n<ul>\n   <li ng-repeat = \"subject in student.subjects |<\/span> filter: subjectName\">\n      {{ subject.name + ', marks:'<\/span> + subject.marks }}\n   <\/li>\n<\/ul>\n<\/pre>\n
<\/code>\n<\/div>\n
\u6309\u8fc7\u6ee4\u5668\u6392\u5e8f<\/h2>\n
\n  \u8981\u6309\u6807\u8bb0\u5bf9\u4e3b\u9898\u8fdb\u884c\u6392\u5e8f\uff0c\u6211\u4eec\u4f7f\u7528 orderBy \u6807\u8bb0\u3002\n<\/div>\n
\n
Subject:\n<ul>\n   <li ng-repeat = \"subject in student.subjects |<\/span> orderBy:'marks'<\/span>\">\n      {{ subject.name + ', marks:'<\/span> + subject.marks }}\n   <\/li>\n<\/ul>\n<\/pre>\n
<\/code>\n<\/div>\n
\u793a\u4f8b<\/h2>\n
\n  \u4ee5\u4e0b\u793a\u4f8b\u663e\u793a\u4e86\u4e0a\u8ff0\u6240\u6709\u8fc7\u6ee4\u5668\u7684\u4f7f\u7528\u3002\n<\/div>\n
testAngularJS.htm<\/h3>\n
\n
<html>\n   <head>\n      <title>Angular JS Filters<\/title>\n      <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.14\/angular.min.js\"<\/span>><\/span>\n      <\/script>\n   <\/head>\n   \n   <body>\n      <h2>AngularJS Sample Application<\/h2>\n      \n      <div ng-app = \"mainApp\"<\/span><\/span> ng-controller = \"studentController\"<\/span>>\n         <table border = \"0\"<\/span><\/span>>\n            <tr>\n               <td>Enter first name:<\/td>\n               <td><input type = \"text\"<\/span><\/span><\/span><\/span> ng-model = \"student.firstName\"<\/span>><\/td>\n            <\/tr>\n            <tr>\n               <td>Enter last name: <\/td>\n               <td><input type = \"text\" ng-model = \"student.lastName\"<\/span>><\/td>\n            <\/tr>\n            <tr>\n               <td>Enter fees: <\/td>\n               <td><input type = \"text\" ng-model = \"student.fees\"<\/span>><\/td>\n            <\/tr>\n            <tr>\n               <td>Enter subject: <\/td>\n               <td><input type = \"text\" ng-model = \"subjectName\"<\/span>><\/td>\n            <\/tr>\n         <\/table>\n         <br\/>\n         \n         <table border = \"0\">\n            <tr>\n               <td>Name in Upper Case: <\/td><td>{{student.fullName<\/span>() | uppercase}}<\/td>\n            <\/tr>\n            <tr>\n               <td>Name in Lower Case: <\/td><td>{{student.fullName<\/span>() | lowercase}}<\/td>\n            <\/tr>\n            <tr>\n               <td>fees: <\/td><td>{{student.fees | currency}}\n               <\/td>\n            <\/tr>\n            <tr>\n               <td>Subject:<\/td>\n               <td>\n                  <ul>\n                     <li ng-repeat = \"subject in student.subjects |<\/span> filter: subjectName |orderBy:'<\/span>marks'\"<\/span>>\n                        {{ subject.name + ', marks:'<\/span> + subject.marks }}\n                     <\/li>\n                  <\/ul>\n               <\/td>\n            <\/tr>\n         <\/table>\n      <\/div>\n      \n      <script>\n         var <\/span>mainApp = angular.module<\/span>(\"mainApp\", []);\n         \n         mainApp.controller<\/span>('studentController'<\/span>, function($scope) {\n            $scope.student = {\n               firstName: \"Mahesh\"<\/span>,\n               lastName: \"Parashar\"<\/span>,\n               fees:500,\n               \n               subjects:[\n                  {name:'Physics'<\/span>,marks:70},\n                  {name:'Chemistry'<\/span>,marks:80},\n                  {name:'Math'<\/span>,marks:65}\n               ],\n               fullName: function() {\n                  var <\/span>studentObject;\n                  studentObject = $scope.student;\n                  return <\/span>studentObject.firstName + \" \"<\/span> + studentObject.lastName;\n               }\n            };\n         });\n      <\/script>\n      \n   <\/body>\n<\/html>\n<\/pre>\n
<\/code>\n<\/div>\n","protected":false},"excerpt":{"rendered":"AngularJS \u8fc7\u6ee4\u5668zh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[187],"tags":[],"class_list":["post-3103","post","type-post","status-publish","format-standard","hentry","category-angularjs-jc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/3103"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=3103"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/3103\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=3103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=3103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=3103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}