AngularJS實作産品清單（頁面搜尋，排序）

标簽屬性介紹

ng-class="{className:expression}" 如果expression為true，則使用className這個class。

ng-click="functionName(pram)" 這跟onclick是一樣的，點選就執行functionName(pram)。

ng-repeat="i in set | filter:filterExpression or filterFunction| orderBy:order+orderType" 循環set裡的元素，有過濾條件和排序條件。

<code> </code><code><</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>></code>

<code> </code><code><</code><code>link</code> <code>href</code><code>=</code><code>"http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code>

<code> </code><code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>

<code> </code><code>font-family: "Arial", "Microsoft YaHei", "黑體", "宋體", sans-serif;</code>

<code> </code><code>.orderColor {</code>

<code> </code><code>color: red;</code>

<code> </code><code></</code><code>style</code><code>></code>

<code><</code><code>body</code> <code>ng-app</code><code>=</code><code>"product"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"container"</code> <code>ng-controller</code><code>=</code><code>"firstController"</code><code>></code>

<code> </code><code><</code><code>nav</code> <code>class</code><code>=</code><code>"navbar navbar-inverse"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"container-fluid"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"collapse navbar-collapse"</code> <code>id</code><code>=</code><code>"bs-example-navbar-collapse-1"</code><code>></code>

<code> </code><code><</code><code>form</code> <code>class</code><code>=</code><code>"navbar-form navbar-left"</code> <code>role</code><code>=</code><code>"search"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"form-group"</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>class</code><code>=</code><code>"form-control"</code> <code>placeholder</code><code>=</code><code>"查找内容"</code> <code>ng-model</code><code>=</code><code>"search"</code><code>></code>

<code> </code><code><</code><code>table</code> <code>class</code><code>=</code><code>"table"</code><code>></code>

<code> </code><code><</code><code>thead</code><code>></code>

<code> </code><code><</code><code>th</code> <code>ng-class</code><code>=</code><code>"{dropup:order===''}"</code> <code>ng-click</code><code>=</code><code>"changeOrder('id')"</code><code>>産品名稱<</code><code>span</code> <code>class</code><code>=</code><code>"caret"</code> <code>ng-class</code><code>=</code><code>"{orderColor:orderType==='id'}"</code><code>></</code><code>span</code><code>></</code><code>th</code><code>></code>

<code> </code><code><</code><code>th</code> <code>ng-class</code><code>=</code><code>"{dropup:order===''}"</code> <code>ng-click</code><code>=</code><code>"changeOrder('name')"</code><code>>産品編号<</code><code>span</code> <code>class</code><code>=</code><code>"caret"</code> <code>ng-class</code><code>=</code><code>"{orderColor:orderType==='name'}"</code><code>></</code><code>span</code><code>></</code><code>th</code><code>></code>

<code> </code><code><</code><code>th</code> <code>ng-class</code><code>=</code><code>"{dropup:order===''}"</code> <code>ng-click</code><code>=</code><code>"changeOrder('price')"</code><code>>産品價格<</code><code>span</code> <code>class</code><code>=</code><code>"caret"</code> <code>ng-class</code><code>=</code><code>"{orderColor:orderType==='price'}"</code><code>></</code><code>span</code><code>></</code><code>th</code><code>></code>

<code> </code><code></</code><code>thead</code><code>></code>

<code> </code><code><</code><code>tbody</code><code>></code>

<code> </code><code><</code><code>tr</code> <code>ng-repeat</code><code>=</code><code>"item in productData | filter:search | orderBy:order+orderType"</code><code>></code>

<code> </code><code><</code><code>td</code><code>>{{item.price | currency:'RMB '}}</</code><code>td</code><code>></code>

<code> </code><code></</code><code>tbody</code><code>></code>

<code> </code><code></</code><code>table</code><code>></code>

<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>angular.module('product', [])</code>

<code> </code><code>.service('productData', function() {</code>

<code> </code><code>return [{</code>

<code> </code><code>name: 'iPhone',</code>

<code> </code><code>price: 5288</code>

<code> </code><code>price: 4388</code>

<code> </code><code>price: 10888</code>

<code> </code><code>name: 'Surface',</code>

<code> </code><code>price: 9288</code>

<code> </code><code>.controller('firstController', function($scope, productData) {</code>

<code> </code><code>$scope.productData = productData;</code>

<code> </code><code>$scope.orderType = 'id';</code>

<code> </code><code>$scope.order = '-';</code>

<code> </code><code>$scope.changeOrder = function(type) {</code>

<code> </code><code>$scope.orderType = type;</code>

<code> </code><code>if ($scope.order === '') {</code>

<code> </code><code>$scope.order = '-';</code>

<code> </code><code>$scope.order = '';</code>

<code> </code><code></</code><code>script</code><code>></code>

本文轉自 iampomelo 51CTO部落格，原文連結：http://blog.51cto.com/iampomelo/1668963，如需轉載請自行聯系原作者

AngularJS實作産品清單（頁面搜尋，排序）

繼續閱讀

mockjs 的正确使用姿勢mockjs fetch的使用思路

css display={block,inline,inline-block}的認識

Web前端就業前景好不好怎麼迅速在行業立足

前端開發日記之window.onload

webstorm中配置git

Vue圖檔切換過渡設計

測試工程師面試解析～

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

怎麼能學好Web前端開發該如何規劃學習路線

如何學好Web前端開發企業對前端人員什麼要求

怎麼學好Web前端開發技術需要注意哪些因素

小白怎麼學好Web前端 Vue動畫效果如何實作

Web前端人員如何提升能力提高效率有哪些方法

小白該如何入門Web前端怎麼學好JS子產品化程式設計

Web前端要掌握哪些知識點怎麼學好前端元件化

WEB前端開發規範文檔（範文）