怎么在angularjs中自定義過(guò)濾器demo-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)怎么在angularjs中自定義過(guò)濾器demo，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司專注于惠來(lái)企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購(gòu)物商城網(wǎng)站建設(shè)。惠來(lái)網(wǎng)站建設(shè)公司,為惠來(lái)等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

以下為數(shù)據(jù):

$scope['classes']=[{id:1,name:"H503",capacity:40,software:"photoshop,金蝶,AI",freeTime:"周一1-2-3,周五1-2-3,周一5-6,"},
   {id:2,name:"H504",capacity:50,software:"chrome,金蝶,office,"
   ,freeTime:"周二1-2-3,周三3-4,周一5-6,"},
   {id:3,name:"H505",capacity:60,software:"chrome,LOL,office,"
   ,freeTime:"周二1-2-3,周三3-4,周四7-8,"}
];

具體功能:

分別在兩個(gè)select選擇星期和課次，列表會(huì)即時(shí)根據(jù)條件更新。

完整代碼:

<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
 <select ng-model="day">
  <option selected="">周一</option>
  <option>周二</option>
  <option>周三</option>
  <option>周四</option>
  <option>周五</option>
 </select>
  <select ng-model="order">
  <option selected="">1-2</option>
  <option>1-2-3</option>
  <option>3-4</option>
  <option>1-2-3-4</option>
  <option>5-6</option>
  <option>7-8</option>
  </select>
  <ul>
   <li ng-repeat="class in classes | myFiter:day:order">
     <span>{{class.id}}</span>
     <span>{{class.name}}</span>
      <span>{{class.capacity}}</span>
      <span>{{class.software}}</span>
   </li>
  </ul>
 </select>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 //假數(shù)據(jù)
  $scope['classes']=[{id:1,name:"H503",capacity:40,software:"photoshop,金蝶，AI",freeTime:"周一1-2-3,周五1-2-3,周一5-6,"},
   {id:2,name:"H504",capacity:50,software:"chrome,金蝶,office,"
   ,freeTime:"周二1-2-3,周三3-4,周一5-6,"},
   {id:3,name:"H505",capacity:60,software:"chrome,LOL,office,"
   ,freeTime:"周二1-2-3,周三3-4,周四7-8,"}
  ];
  //select的默認(rèn)值
  $scope.order="1-2";
  $scope.day="周一";
});
//自定義過(guò)濾器
app.filter('myFiter',function()
{
 return function(input,day,order)
 {
   var time=day+order;
   var output=[];
   for(var i=0;i<input.length;i++)
   {
   var n=input[i].freeTime.indexOf(time);
   // console.log(n);
   // console.log(input[i].freeTime.charAt(n+time.length));
    if(n!=-1)//如果能找到
    {
     if(input[i].freeTime.charAt(n+time.length)==',')
     //這樣做是為了防止1-2與1-2-3是一樣的結(jié)果
      output.push(input[i]);
    }
   }
   return output;
 }
})
</script>
</body>
</html>

運(yùn)行效果：

怎么在angularjs中自定義過(guò)濾器demo

看完上述內(nèi)容，你們對(duì)怎么在angularjs中自定義過(guò)濾器demo有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當(dāng)前文章：怎么在angularjs中自定義過(guò)濾器demo-創(chuàng)新互聯(lián)
當(dāng)前URL：http://jinyejixie.com/article42/jsjhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、搜索引擎優(yōu)化、網(wǎng)站營(yíng)銷、軟件開(kāi)發(fā)、App設(shè)計(jì)、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

怎么在angularjs中自定義過(guò)濾器demo-創(chuàng)新互聯(lián)