ng-repeat을 이용한 div 동적 생성

FrontEnd/angularJS 2018. 12. 12. 16:44
반응형

sample Json 

{message:[{name:test1,desc:test1desc},{name:test2,desc:test2desc}]}



.js

.controller('cartCtrl', ['$scope', '$http', function ($scope, $http) {

$http({

                        method: 'POST',

                        url: URL,

                        data: $.param({

                        }),

                        headers: {

                            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'

                        }

                    }).success(function (response) {

                        $scope.itemList = response.message;


                    }).finally(function () {

                    });

}])

.directive('itemListRepeatDone', function () {

            return function (scope, element, attrs) {

                if (scope.$last) {

                   //생성이 끝난뒤 핸들링

                }

            }

        })


.html


<div class="col-md-4 col-sm-6" ng-repeat="item in itemList" item-list-repeat-done>

  <h4 data-name="product_name">{{ item.name }}</h4>

  <p data-name="product_desc">{{ item.desc }}</p>

</div>

반응형

'FrontEnd > angularJS' 카테고리의 다른 글

ngRoute를 이용한 싱글 페이지 웹 앱  (0) 2018.12.12
블로그 이미지

앱스페이스

,

blob을 이용한 http request 로 받은 response 이미지를 img 태그에 삽입

FrontEnd/javascript 2018. 12. 12. 16:44
반응형

$http({

                        method: 'POST', //or GET

                        url: URL,

                        data: $.param({

                        }),

                        headers: {

                            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'

                        },

                        responseType: "blob"

                    }).success(function (response) {

                        

                        //이미지 지정

                        var urlCreator = window.URL || window.webkitURL;

                        var imageUrl = urlCreator.createObjectURL(response);

                        $('.img').attr("src", imageUrl);


                    }).finally(function () {

                    });

반응형

'FrontEnd > javascript' 카테고리의 다른 글

자바스크립트로 css생성 하기  (0) 2018.12.12
블로그 이미지

앱스페이스

,

ngRoute를 이용한 싱글 페이지 웹 앱

FrontEnd/angularJS 2018. 12. 12. 16:43
반응형

index.html


<body ng-app="myApp">

        <div class="container">

            <ng-view></ng-view> <-- ng-view 위치에 page1.html, page2.html 내용이 보여짐-->

        </div>

    </body>


page1.html


page2.html


.js

angular.module('myApp', ['ngRoute'])

        /*뷰 설정*/

        .config(function ($routeProvider) {

            $routeProvider

                    .when('/page1', {templateUrl: 'page1.html', controller: 'page1Ctrl'})

                    .when('/page2', {templateUrl: 'page2.html', controller: 'page2Ctrl'})

                    .otherwise({redirectTo: '/page1'}); //기본 페이지


        })

.controller('page1Ctrl', ['$scope', '$http', function ($scope, $http) {


            }])

.controller('page2Ctrl', ['$scope', '$http', function ($scope, $http) {


            }]);

반응형

'FrontEnd > angularJS' 카테고리의 다른 글

ng-repeat을 이용한 div 동적 생성  (0) 2018.12.12
블로그 이미지

앱스페이스

,

자바스크립트로 css생성 하기

FrontEnd/javascript 2018. 12. 12. 16:43
반응형

var mySheet = document.styleSheets[0] 일때

 

if(!mySheet) {

    var stylesheet = document.createElement("style");

    stylesheet.setAttribute("type", "text/css");

    document.getElementsByTagName('head')[0].appendChild(stylesheet);

    mySheet = document.styleSheets[0];

}

반응형

'FrontEnd > javascript' 카테고리의 다른 글

blob을 이용한 http request 로 받은 response 이미지를 img 태그에 삽입  (0) 2018.12.12
블로그 이미지

앱스페이스

,
반응형

공지사항

글 보관함

달력

«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

티스토리툴바