Skip to content

Instantly share code, notes, and snippets.

@soomtong

soomtong/ng-pattern1.css

Last active December 23, 2015 12:09
Show Gist options
  • Save soomtong/6633742 to your computer and use it in GitHub Desktop.
Save soomtong/6633742 to your computer and use it in GitHub Desktop.
Download ZIP
angular.js repeat list with multi checked filter pattern
Raw
ng-pattern1.css
ul { list-style-type: none; margin-top: 1.5em; }
hr.space { background: transparent; border: transparent; }
Raw
ng-pattern1.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="angular pattern" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app>
<div ng-controller="OpencastCtrl">
조건 제한
<label ng-repeat="tag in filter">
<input type="checkbox" ng-model="tags[tag]">
{{tag}}
</label>
<p>
{{tags}}
</p>
<ul>
<li ng-repeat="cast in opencasts | orderBy:'id' | filter:searchCustom">
<div class="opencast" style="font-size: 10px">
<div class="cast-list">
<h3><em>No.{{cast.id}}</em> {{cast.title}}</h3>
<span class="castlink"><span ng-repeat="item in cast.tag" style="margin:0 4px;">{{item}}</span></span>
<ul class="thumbnail">
<li class="photo" ng-repeat="item in cast.list">
<span><a href="/"><img ng-src="{{ item.imgUrl }}"></a></span>
<span class="photolink">{{item.title}}</span>
</li>
</ul>
<div class="castnote">
<p>{{cast.desc}}</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Raw
ng-pattern1.js
function OpencastCtrl($scope) {
$scope.tags = {};
$scope.filter = ['바다', '트래킹', '서울'];
$scope.searchCustom = function (item) {
var h = 0, i, j, k, l = Object.keys($scope.tags).length;
var result = false;
if (l < 1) return true;
for (k in $scope.tags) {
if ($scope.tags[k]) h++;
}
console.log(h, l);
if (h < 1) return true;
for ( i in item.tag ) {
for ( j in $scope.tags ) {
if ($scope.tags[j] && item.tag[i] == j) {
result = true;
}
}
}
return result;
};
$scope.opencasts = [
{
"id": 1,
"title": "여행에는 쇼핑과 맛집이 필수",
"desc": "서울 4대 쇼핑천국에의 색다른 여행! 보고 먹고 쇼핑해 보세요~",
"tag": ["서울","쇼핑"],
"list": [
{
"title": "가로수길 맛집볼거리",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/19471799116367.jpg",
"link": "/"
},
{
"title": "쇼핑천국 명동 & 남산",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/19462054793359.jpg",
"link": "/"
},
{
"title": "이태원 서울속 외국",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/20415899897477.jpg",
"link": "/"
},
{
"title": "남대문 시장 구식쇼",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/20402375091030.jpg",
"link": "/"
}
]
},
{
"id": 2,
"title": "서울근교 가벼운 트레킹코스",
"desc": "서울근교 산책수준의 트래킹 코스 4군데! 이번주말에 한번 다녀오시길~",
"tag": ["서울","트래킹"],
"list": [
{
"title": "과천 탑스타 청계산",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/20060661377832.jpg",
"link": "/"
},
{
"title": "서울트래킹 서달산",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/21031295673273.jpg",
"link": "/"
},
{
"title": "의왕의 자존심 모락산",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/21032830731181.jpg",
"link": "/"
},
{
"title": "광명 녹색쉼터 구름산",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/20053573600440.jpg",
"link": "/"
}
]
},
{
"id": 3,
"title": "남해 통영 VS. 서해 대이작도",
"desc": "남해와 서해, 통영과 대이작도, 어딜 먼저 가봐야 할까요?",
"tag": ["바다"],
"list": [
{
"title": "통영,동양의 나폴리#1",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/20000712951115.jpg",
"link": "/"
},
{
"title": "통영,동양의 나폴리#2",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/19593818975743.jpg",
"link": "/"
},
{
"title": "대이작도 24시#1",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/21023874287633.jpg",
"link": "/"
},
{
"title": "대이작도 24시#2",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130415/19574156035454.jpg",
"link": "/"
}
]
},
{
"id": 274,
"title": "당일치기 여행지~",
"desc": "여름휴가전 여행가기 어정쩡한 주말이 지금입니다. 가까운 곳으로 당일로 다녀올만한 곳 소개합니다.",
"tag": ["당일", "국밥"],
"list": [
{
"title": "굴마을 뚝배기굴밥, 해장굴밥",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130501/00060514137140.jpg",
"link": "/"
},
{
"title": "힐튼 남해 골프앤스파 리조트 - 경상 - 럭셔리리조트",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130604/00430045362591.jpg",
"link": "/"
},
{
"title": "수안보온천 - 충청 - 스파온천",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130507/19035317848669.jpg",
"link": "/"
},
{
"title": "롯데월드 아이스링크 - 서울 - 아이스링크",
"imgUrl": "http://thumb.opencast.naver.net/opencast01/z/e/zest_on/20130507/19093342069517.jpg",
"link": "/"
}
]
}
];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment