[angularjs] two-way binding example

123456789101112131415161718192021 Angularjs {{vm.title}} angular.module('app',[]) .controller('ctrl',function($scope){ var vm = this; vm.title = "change the value"; }); Colored by Color Scriptercs angularJs two-way binding exampleangularJs Verstion : 1.4.9 :: codepen.ioSee the Pen angularjs 1.4 two-way binding by homin ahn (@beans9) on CodePen.

• format_list_bulleted Programming/AngularJS
• · 2016. 6. 12.
• textsms

[angular-bootstrap] tooltip custom trigger

angularjs-bootstrap tooltip 사용방법 및 api는 아래 사이트 참조. https://angular-ui.github.io/bootstrap/#/tooltip 구현하려는 기능은 tooltip을 이용하여 복사버튼을 만들고, 해당버튼을 누르면 copied!라는 툴팁을 출력하여 복사되었는지를 인지시키고 사라지게 하는 기능 구현. tooltip에는 기본적으로 아래와 같은 trigger를 제공하고 있다. var triggerMap = { 'mouseenter': 'mouseleave', 'click': 'click', 'outsideClick': 'outsideClick', 'focus': 'blur', 'none': '' }; {click:mouseleave} 같은 트리거가 있으면 좋으려만 ..

• format_list_bulleted Programming/AngularJS
• · 2016. 6. 1.
• textsms

Yeoman를 이용한 gulp-angularjs 기본환경 셋팅

Yeoman을 이용해서 기본 템플릿을 설정하고 빠르게 개발하는게 가능하다. 그중에 generator-gulp-angular를 이용하면 gulp 환경의 angularjs 프로젝트를 빠르게 만들수 있다. yo, gulp, bower 설치(필수사항)npm install -g yo gulp bower generator-gulp-angular 설치npm install -g generator-gulp-angular 설치 후 워크 디렉토리 생성 후 해당폴더에서 yo gulp-angular 그 뒤로 몇가지 기본 설정 사항을 선택 후 엔터키 입력만으로 기본환경 구성이 완료된다. 완료 후 아래 명령어로 gulp를 구동시켜 보면 angularjs로 구성된 화면이 brower-sync를 통해 실행되는것을 볼수 있다. gulp..

• format_list_bulleted Programming/AngularJS
• · 2016. 5. 6.
• textsms

[angularjs] focus 지정하기

jquery를 사용한다면 간단하게 $("#id").focus() 하면 될 일이지만서도....... angularjs를 이용한다면, 디렉티브를 만들어서 element 조작을 통해서 포커스를 지정한다. -_-뭔가, 복잡스럽다. 아래 plnkr 소스를 참조.

• format_list_bulleted Programming/AngularJS
• · 2016. 3. 11.
• textsms

[angularjs] directive compile로 원하는 형태로 변경하기

angularjs에 directive라는 유용한 기능이 있다. directive가 생성되는 과정에는 compile과 link라는 과정을 거치게 되는데, compile에 경우 scope와는 상관없이 html에 대한 element 속성만 변경이 가능하다. 예를 들면 아래와 같이 반복되면서 파라미터 객체만 달리해야하는 html 태그가 있을때 사용하면 유용하다. 위와 같이 반복되는 html tag를 아래와 같이 디렉티브를 사용하여 쉽게 사용할수 있다. 자세한 샘플코드는 아래 plunker에서 확인하도록 하자. http://plnkr.co/edit/cJgfVG?p=info

• format_list_bulleted Programming/AngularJS
• · 2016. 2. 25.
• textsms

[angularjs] typeahead 사용하기

angularjs typeahead는 ui-bootstrap에 포함되어 있습니다. 사용방법은 angularjs와 ui-bootstrap을 선언해주고input text에 uib-typeahead 선언해주면 사용할수 있습니다.module에서 ui-bootstrap 의 선언이 필요합니다. 제일 아래 jsbin에서 실제 코드를 테스트할수 있습니다. 다음 포스팅에서는 한글사용 문제와 해결방법에 대해서 포스팅 하도록 하겠습니다. html selected : {{selected}} jsangular.module("app",['ui.bootstrap']).controller("appCtrl",function($scope){ $scope.selected = ""; $scope.myData = [ {name:'abcd1'..

• format_list_bulleted Programming/AngularJS
• · 2016. 2. 19.
• textsms