AngularJS forEach ng-repeat 예제

mirinae.maru 0 Comments

■ Spring Controller

@RequestMapping(
  value = "forEach.jsonf",
  method = RequestMethod.GET,
  produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public List<SampleVO>  forEach(
    @ModelAttribute Params params) throws Exception {   

  List<SampleVO> sampleList = new ArrayList<SampleVO>();

  SampleVO sampleVO = new SampleVO();
  sampleVO.setId("id01");
  sampleVO.setName("name01");
  sampleList.add(sampleVO);

  sampleVO = new SampleVO();
  sampleVO.setId("id02");
  sampleVO.setName("name02");
  sampleList.add(sampleVO);

  sampleVO = new SampleVO();
  sampleVO.setId("id03");
  sampleVO.setName("name03");
  sampleList.add(sampleVO);

  return sampleList;
}

 
 
 

■ AngularJS code

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script src='/js/jquery/jquery-1.11.0.min.js'></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myAppCtrl", function($scope,$http){

  $scope.sampleList = [];
  $http({
    method : 'GET',
    cache  : false,
    url    : '/jsonsample/forEach.jsonf'
  })
  .success(function(response){
    angular.forEach(response, function(value, key) {
      $scope.sampleList.push({id:value.id, name:value.name});
    });
  });
});
</script>
</head>
<body ng-controller="myAppCtrl">
  <h1>
    AngularJS forEach, ng-repeat<br/>
  </h1>
  <hr/>
  <div>
    <li ng-repeat="row in sampleList">{{row.name}}
  </div>
</body>
</html>

 
 
 

■ 실행결과
forEach ng-repeat
 
 
 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다