Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
weihanchenpro
0viewers