跳到主要內容

AngularJS：ng-repeat、KeyValueObject、join、customer filter with textfield、multiple ng-app

作者： 匿名


Search：
★ {{ title }}{{member.name}}→[{{member.skills.join('@')}} ] ★
{{ member.experience }}%

精簡版：http://jsbin.com/guvuq/18/edit

完整版：http://jsbin.com/mipar/11/edit

一、設計一個textfield用來過濾資料，將ng-model設定為query。

Search：<input ng-model="query" placeholder="Type to filter" />    
  <br />

二、controller設計

<script language="javascript">
var myApp = angular.module('myApp', ['RoleApp']);
function isCompared(key,values,query){
   //---------將key,value內容轉為string且小寫再行比較---------------//
   key = key.toString().toLowerCase();
   query = query.toString().toLowerCase(); 
   if (key.indexOf(query) != -1) return true;//若key中有搜尋值則代表找到
   //---------若values內中有包含搜尋值則代表已找到------------------//
   for (var data in values) {
       var text = values[data].toString().toLowerCase();
       if (text.indexOf(query) != -1) return true;
      
   }
  return false;//未找到
}
angular.module('filters',[])
  .filter('RoleFilter', function(){
    
    return function(input, query){
      if(!query) return input;
      var result = {};
      
      angular.forEach(input, function(friendData, friend){
        if(isCompared(friend,friendData,query))
          result[friend] = friendData;          
      });
      return result;
    };
  });
    
var RoleApp = angular.module('RoleApp',['filters'])
  .controller('RoleCtrl', function($scope) {
    $scope.members = {
  '神射手': {
   name: '迪文',
   importance: 5,
                        experience:98,
   skills: ['二連矢', '銳利射擊']
  },
  '騎士領主': {
   name: '賽依連',
                        importance: 5,
   experience:95,
   skills: ['狂擊', '艾斯敦攻擊']
  },
                '十字刺客': {
   name: '艾勒梅斯',
                        importance: 4,
   experience:95,
   skills: ['音速攻擊', '黑暗瞬間']
  },
                '魔導師': {
   name: '凱特莉娜',
                        importance: 4,
   experience:90,
   skills: ['暴風雪', '咖般塔音']
  },
                '神工匠': {
   name: '哈沃得',
                        importance: 3,
   experience:70,
   skills: ['大地之擊', '金錢攻擊']
  },
                '神官': {
   name: '瑪嘉雷特',
                        importance: 2,
   experience:60,
   skills: ['治癒術', '天使之怒']
  }
 };
  }); 
 RoleApp.filter('getLoopTimes', function() {//設定迴圈次數
  return function(input, total) {
    total = parseInt(total);
    for (var i=0; i<total; i++)
      input.push(i);
    return input;
  };
});

  </script>
(一)由於angularJS預設僅能存在一個ng-app，若要擴充則需要將主要的ng-app模組化，這一段是因應此blogger而設計，因發佈許多文章，故不可能再使用angularJS的時候只使用單一ng-app，故須加入下列程式碼，而一開始也必須加入一段。
1.var myApp = angular.module('myApp', []);//一開始
2.var myApp = angular.module('myApp', ['RoleApp']);//需使用新的app時
(二)自訂一個filter->getLoopTimes來傳入n，並增加n個空間。 
RoleApp.filter('getLoopTimes', function() {//設定迴圈次數
  return function(input, total) {
    total = parseInt(total);
    for (var i=0; i&lt;total; i++)
      input.push(i);
    return input;
  };
});
(三)利用RoleApp實作controller功能並繫結filters(RoleFilter)，且設定members內容，以物件方式存之以利而後使用foreach印出。 
var RoleApp = angular.module('RoleApp',['filters'])//加入filter
  .controller('RoleCtrl', function($scope) {//實作controller
    $scope.members = {
  '神射手': {
   name: '迪文',
   importance: 5,
                        experience:98,
   skills: ['二連矢', '銳利射擊']
  },
  '騎士領主': {
   name: '賽依連',
                        importance: 5,
   experience:95,
   skills: ['狂擊', '艾斯敦攻擊']
  },
                '十字刺客': {
   name: '艾勒梅斯',
                        importance: 4,
   experience:95,
   skills: ['音速攻擊', '黑暗瞬間']
  },
                '魔導師': {
   name: '凱特莉娜',
                        importance: 4,
   experience:90,
   skills: ['暴風雪', '咖般塔音']
  },
                '神工匠': {
   name: '哈沃得',
                        importance: 3,
   experience:70,
   skills: ['大地之擊', '金錢攻擊']
  },
                '神官': {
   name: '瑪嘉雷特',
                        importance: 2,
   experience:60,
   skills: ['治癒術', '天使之怒']
  }
 };
  });
(四)實作RoleFilter，利用foreach整個members並使用isCompared函式來檢查textfield輸入的文字是否存在於members內，且加以過濾。 
angular.module('filters',[])
  .filter('RoleFilter', function(){//自定義filter
    
    return function(input, query){
      if(!query) return input;
      var result = {};
      
      angular.forEach(input, function(friendData, friend){
        if(isCompared(friend,friendData,query))
          result[friend] = friendData;          
      });
      return result;
    };
  });
(五)實作isCompared函式，傳入key、values、query，運作原理主要是先檢查key是否包含query若否則檢查values內各個資料成員。 
function isCompared(key,values,query){//檢查members內資料是否包含query字串
   //---------將key,value內容轉為string且小寫再行比較---------------//
   key = key.toString().toLowerCase();
   query = query.toString().toLowerCase(); 
   if (key.indexOf(query) != -1) return true;//若key中有搜尋值則代表找到
   //---------若values內中有包含搜尋值則代表已找到------------------//
   for (var data in values) {
       var text = values[data].toString().toLowerCase();
       if (text.indexOf(query) != -1) return true;
      
   }
  return false;//未找到
}

三、資料輸出

<div ng-controller="RoleCtrl" style="margin-top: 20px;">
<div ng-repeat="(title, member) in members|RoleFilter:query">
<div class="isa_info" style="background-color: #bde5f8; color: red; height: 35px; width: 100%;">
<a class="button red " href="https://www.blogger.com/blogger.g?blogID=5937314774695181933" style="border-radius: 15px; color: white; font-size: 24px; padding: 0px 0px;">
         <span ng-repeat="n in [] | getLoopTimes:member.importance">
                     ★
         </span>
     </a>
             {{ title }}{{member.name}}→[{{member.skills.join('@')}} ]
      <a class="button red " href="https://www.blogger.com/blogger.g?blogID=5937314774695181933" style="border-radius: 15px; color: white; font-size: 24px; padding: 0px 0px;">
         <span ng-repeat="n in [] | getLoopTimes:member.importance">
                     ★
         </span>
     </a>
   </div>
<div class="progress">
<span class="orange" style="width: {{ member.experience }}%;">{{ member.experience }}%</span>
   </div>
</div>
</div>
</div>
(一)將ng-controller設定為RoleCtrl。
<div ng-controller="RoleCtrl" style="margin-top: 20px;">
(二)使用ng-repeat將members內資料印出及使用自定義過濾器RoleFilter 
<div ng-repeat="(title, member) in members|RoleFilter:query">
(三)以下程式碼則將members資料搭配自訂面板印出，而比較特別的是：ng-repeat="n in [] | getLoopTimes:member.importance"，這一段主要利用上面controller所設計的getLoopTime過濾器並傳入member.importance(數字型態)參數來決定要印出多少個★，另外也設計processbar的css同樣透過參數傳入來決定長條進度。
<div class="isa_info" style="background-color: #bde5f8; color: red; height: 35px; width: 100%;">
<a class="button red " href="https://www.blogger.com/blogger.g?blogID=5937314774695181933" style="border-radius: 15px; color: white; font-size: 24px; padding: 0px 0px;">
         <span ng-repeat="n in [] | getLoopTimes:member.importance">
                     ★
         </span>
     </a>
             {{ title }}{{member.name}}→[{{member.skills.join('@')}} ]
      <a class="button red " href="https://www.blogger.com/blogger.g?blogID=5937314774695181933" style="border-radius: 15px; color: white; font-size: 24px; padding: 0px 0px;">
         <span ng-repeat="n in [] | getLoopTimes:member.importance">
                     ★
         </span>
     </a>
   </div>
<div class="progress">
<span class="orange" style="width: {{ member.experience }}%;">{{ member.experience }}%</span>
   </div>

四、完整程式碼-部落格版(多個app處理方式) 

<script language="javascript">
var myApp = angular.module('myApp', ['RoleApp']);
function isCompared(key,values,query){//檢查members內資料是否包含query字串
   //---------將key,value內容轉為string且小寫再行比較---------------//
   key = key.toString().toLowerCase();
   query = query.toString().toLowerCase(); 
   if (key.indexOf(query) != -1) return true;//若key中有搜尋值則代表找到
   //---------若values內中有包含搜尋值則代表已找到------------------//
   for (var data in values) {
       var text = values[data].toString().toLowerCase();
       if (text.indexOf(query) != -1) return true;
      
   }
  return false;//未找到
}
angular.module('filters',[])
  .filter('RoleFilter', function(){//自定義filter
    
    return function(input, query){
      if(!query) return input;
      var result = {};
      
      angular.forEach(input, function(friendData, friend){
        if(isCompared(friend,friendData,query))
          result[friend] = friendData;          
      });
      return result;
    };
  });
    
var RoleApp = angular.module('RoleApp',['filters'])//加入filter
  .controller('RoleCtrl', function($scope) {//實作controller
    $scope.members = {
  '神射手': {
   name: '迪文',
   importance: 5,
                        experience:98,
   skills: ['二連矢', '銳利射擊']
  },
  '騎士領主': {
   name: '賽依連',
                        importance: 5,
   experience:95,
   skills: ['狂擊', '艾斯敦攻擊']
  },
                '十字刺客': {
   name: '艾勒梅斯',
                        importance: 4,
   experience:95,
   skills: ['音速攻擊', '黑暗瞬間']
  },
                '魔導師': {
   name: '凱特莉娜',
                        importance: 4,
   experience:90,
   skills: ['暴風雪', '咖般塔音']
  },
                '神工匠': {
   name: '哈沃得',
                        importance: 3,
   experience:70,
   skills: ['大地之擊', '金錢攻擊']
  },
                '神官': {
   name: '瑪嘉雷特',
                        importance: 2,
   experience:60,
   skills: ['治癒術', '天使之怒']
  }
 };
  }); 
 RoleApp.filter('getLoopTimes', function() {//設定迴圈次數
  return function(input, total) {
    total = parseInt(total);
    for (var i=0; i<total; i++)
      input.push(i);
    return input;
  };
});

  </script>

<br />
<div id="RoleDiv">
Search：<input ng-model="query" placeholder="Type to filter" />    
  <br />
<div ng-controller="RoleCtrl" style="margin-top: 20px;">
<div ng-repeat="(title, member) in members|RoleFilter:query">
<div class="isa_info" style="background-color: #bde5f8; color: red; height: 35px; width: 100%;">
<a class="button red " href="https://www.blogger.com/blogger.g?blogID=5937314774695181933" style="border-radius: 15px; color: white; font-size: 24px; padding: 0px 0px;">
         <span ng-repeat="n in [] | getLoopTimes:member.importance">
                     ★
         </span>
     </a>
             {{ title }}{{member.name}}→[{{member.skills.join('@')}} ]
      <a class="button red " href="https://www.blogger.com/blogger.g?blogID=5937314774695181933" style="border-radius: 15px; color: white; font-size: 24px; padding: 0px 0px;">
         <span ng-repeat="n in [] | getLoopTimes:member.importance">
                     ★
         </span>
     </a>
   </div>
<div class="progress">
<span class="orange" style="width: {{ member.experience }}%;">{{ member.experience }}%</span>
   </div>
</div>
</div>
</div>

五、完整程式碼-單一網頁版

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <link rel="stylesheet" href="https://aaad366b26125175724dd9c91cbade0cd1509dd0.googledrive.com/host/0B4GSVRY43FEXeUVOTlZNR0xqUkk/css/barAndInfo.css">
  <link rel="stylesheet" href="https://aaad366b26125175724dd9c91cbade0cd1509dd0.googledrive.com/host/0B4GSVRY43FEXeUVOTlZNR0xqUkk/css/button.css">
  
  <script language="javascript">
function isCompared(key,values,query){
   //---------將key,value內容轉為string且小寫再行比較---------------//
   key = key.toString().toLowerCase();
   query = query.toString().toLowerCase(); 
   if (key.indexOf(query) != -1) return true;//若key中有搜尋值則代表找到
   //---------若values內中有包含搜尋值則代表已找到------------------//
   for (var data in values) {
       var text = values[data].toString().toLowerCase();
       if (text.indexOf(query) != -1) return true;
      
   }
  return false;//未找到
}

angular.module('filters',[])
  .filter('RoleFilter', function(){
    
    return function(input, query){
      if(!query) return input;
      var result = {};
      
      angular.forEach(input, function(friendData, friend){
        if(isCompared(friend,friendData,query))
          result[friend] = friendData;          
      });
      return result;
    };
  });
    
var RoleApp = angular.module('app',['filters'])
  .controller('RoleCtrl', function($scope) {
     $scope.members = {
  '神射手': {
   name: '迪文',
   importance: 5,
            experience:98,
   skills: ['二連矢', '銳利射擊']
  },
  '騎士領主': {
   name: '賽依連',
            importance: 5,
   experience:95,
   skills: ['狂擊', '艾斯敦攻擊']
  },
        '十字刺客': {
   name: '艾勒梅斯',
            importance: 4,
   experience:95,
   skills: ['音速攻擊', '黑暗瞬間']
  },
       '魔導師': {
   name: '凱特莉娜',
            importance: 4,
   experience:90,
   skills: ['暴風雪', '咖般塔音']
  },
        '神工匠': {
   name: '哈沃得',
            importance: 3,
   experience:70,
   skills: ['大地之擊', '金錢攻擊']
  },
        '神官': {
   name: '瑪嘉雷特',
            importance: 2,
   experience:60,
   skills: ['治癒術', '天使之怒']
  }
 };
  }); 
  RoleApp.filter('getLoopTimes', function() {
  return function(input, total) {
    total = parseInt(total);
    for (var i=0; i<total; i++)
      input.push(i);
    return input;
  };
});
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div ng-app='app'>
  Search：<input placeholder="Type to filter" ng-model="query">    
  <div style="margin-top:20px;" ng-controller="RoleCtrl" >
     <div ng-repeat="(title, member) in members|RoleFilter:query">
     <div  class="isa_info" style="width:100%;background-color:  #BDE5F8;height: 35px;color: #333;">
    <a href="" class="button red " target="_blank" style=" padding: 0px 0px;font-size: 24px;color:#FFF;border-radius: 15px;">
                <span ng-repeat="n in [] | getLoopTimes:member.importance">
                     ★
                </span>

          </a>
             {{ title }}{{member.name}}→[{{member.skills.join(', ')}} ]
           <a href="" class="button red " target="_blank" style=" padding: 0px 0px;font-size: 24px;color:#FFF;border-radius: 15px;">
                <span ng-repeat="n in [] | getLoopTimes:member.importance">
                     ★
                </span>

          </a>
     </div>
     <div class="progress" >
           <span class="orange" style="width: {{ member.experience }}%;"><span>{{ member.experience }}%</span>
     </div>
      </div>
   </div> 
</div>
</body>
</html>
標籤：

留言

張貼留言

這個網誌中的熱門文章

java西元民國轉換_各種不同格式

作者： 匿名
張貼留言
閱讀完整內容

C#資料庫操作(新增、修改、刪除、查詢)

作者： 匿名
張貼留言
閱讀完整內容

【Excel好好玩】 自己的資產自己管！善用Google Sheet來幫我們評估貸款

作者：
這次介紹的主題是關於Excel的貸款還款計畫試算，我們人生中總會遇到需要大筆金額的花費，但當資金不夠時就得進行貸款，而貸款之前如果我們能夠審慎評估，並分析自己的還款能力之後在進行凍作，相信風險會小很多，因此就自己動動手來使用Google Sheet進行試算吧！ 基本資料 ● 貸款總額: 1000000 ● 貸款期數: 84月 ● 年利率: 2.11% ● 月利率: 0.18% P.S 月利率 = 年利率 / 12 重要函式 PMT : 這是Google Sheet內建的重要年金計算公式，我們可以善用這個公式來計算固定利率及期數的固定攤還本息。因為PMT函式計算出的結果為負數，所以前面加上-號轉成正數。 動手做 首先我們在Excel表上列出我們的基本資料 圖片來源 其中月利率的部分就使用公式「=B4/12」 接著我們填上第一列的期數跟餘額 圖片來源 =B2 =B3 使用關鍵PMT函數來計算本息的部分 因為PMT函式計算出的結果為負數，所以前面加上-號轉成正數。 -PMT(貸款利率(月利率), 貸款期數, 貸款總額) =-PMT($B$5,$B$3,$B$2) 圖片來源 計算利息 利息 = 貸款餘額 x 月利率 =B8*$B$5 圖片來源 計算本金 本金 = 本息 - 利息 =C8-D8 圖片來源 製作第二列餘額的部分 餘額的部分 = 上一期的餘額 - 上一期的本金 圖片來源 接著拖曳該兩列往下拉，即可查看每一期的利息與本金 圖片來源 結語 雖然市面上已經有很多貸款銀行都提供了試算功能，但如果我們想要進一步管理自己的資產時，就需要將每一期的金額給計算出來，因此才會將公式運用在Excel表，讓我們的資產管理表能夠結合負債，進一步評估我們理財行動的下一步，希望這樣的經驗可以幫助到正在理財道路上打拼的夥伴，讓我們透過有效的管理，幫助荷包長大吧！ 喜歡撰寫文章的你，不妨來了解一下： Web3.0時代下為創作者、閱讀者打造的專屬共贏平台 — 為什麼要加入？ 歡迎加入一起練習寫作，賺取知識，累積財富！
張貼留言
閱讀完整內容