앵귤러js 2강
<%@ page language=”java” contentType=”text/html; charset=EUC-KR”
pageEncoding=”EUC-KR”%>
<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core” %>
<!DOCTYPE html>
<html>
<head>
<meta charset=”EUC-KR”>
<title>Insert title here</title>
</head>
<script type=”text/javascript” src=”</script’>http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js”></script>
<script type=”text/javascript”>
//var a=[]; 배열
//var a={no:1,name:”aaa”} 자바스크립트의 객체.
// a.no => 1
// a.name => aaa
angular.module(‘myApp’,[]).filter(‘Search’,Search).controller(‘BookCtrl’,BookCtrl);
function BookCtrl($scope){
//객체 배열
$scope.books=[
<c:forEach var=”vo” items=”${list}” varStatus=”i”>
{
“auth”:”<c:out value=’${vo.auth}’/>”,
“title”:”<c:out value=’${vo.title}’/>”,
“active”:false
}
<c:if test=”${i.count<count}”>,</c:if>
</c:forEach>
];
}
function Search(){
return function(arr,text){
if(!text)
return arr;
var searchText=text.toLowerCase();
//$http.get(”);
var result=[];
arr.forEach(function(data){
if(data.title.toLowerCase().indexOf(searchText)!=-1){
result.push(data);
}
});
return result;
}
}
</script>
<body>
<div ng-app=”myApp”>
<div ng-controller=”BookCtrl” class=wrap>
<h1>Book List</h1>
<input type=”text” ng-model=”text” placeholder=”검색어 입력”>
<ul>
<li ng-repeat=”book in books | Search:text”
ng-mouseover=”book.active=true”
ng-mouseleave=”book.active=false”
ng-class=”{active:book.active}”>
<span class=”auth”>{{book.auth}}</span>
<span>{{book.title}}</span>
</li>
</ul>
</div>
</div>
</body>
</html>