AngularJS -SitePoint로 타이핑 위젯 생성

AngularJS 프로젝트를 시작하는 경우 모든 구성 요소를 각도로 작성할 수 있습니다. 기존 jQuery 플러그인을 재사용하는 것은 확실히 가능하지만, 지침 안에 많은 jQuery를 던지는 것이 항상 올바른 방법은 아닙니다. 저의 조언은 먼저 더 간단하고 더 나은 방식으로 순수한 각도로 동일한 것을 구현할 수 있는지 확인하는 것입니다. 이렇게하면 응용 프로그램 코드를 깨끗하고 유지 관리 할 수 ​​있습니다. 초보자를 대상으로하는이 튜토리얼은 AngularJS가있는 간단한 유형의 위젯을 만들기 위해 독자들을 안내합니다. 키 테이크 아웃

튜토리얼은 텍스트 상자에 사용자 유형의 제안을 제공하는 AngularJS로 Typeahead 위젯을 작성하여 독자를 안내합니다. 위젯은 구성 가능하고 기존 시스템에 쉽게 통합되도록 설계되었습니다. 프로세스에는 RESTFUL API와 상호 작용하는 공장을 구축하고 자동 완성 제안을 위해 JSON 데이터를 반환하여 TypEhead 입력 필드를 캡슐화하고 지침을위한 템플릿을 작성하는 지침을 만듭니다. 이 지침은 최종 사용자가 JSON 객체 속성과 같은 옵션을 조정하여 제안의 일부로 표시하여 선택한 항목을 보유 할 컨트롤러 범위의 모델을 표시 할 수 있도록 구성 가능합니다. 튜토리얼은 또한 지침의 링크 기능을 업데이트하고 사용하기위한 지침을 구성하는 방법을 설명합니다. 최종 제품은 구성 옵션이있는 AngularJS Typeahead 위젯으로 CSS를 사용하여 추가로 사용자 정의 할 수 있습니다. 전체 소스 코드는 github에서 다운로드 할 수 있습니다.

개요 이 튜토리얼에서는 누군가가 텍스트 상자에 입력하기 시작하자마자 제안을 생성하는 간단한 유형의 헤드 위젯을 만들 것입니다. 최종 제품이 매우 구성 가능하고 기존 시스템에 쉽게 연결할 수 있도록 앱을 구조적으로 설계 할 것입니다. 창조 과정과 관련된 기본 단계는 다음과 같습니다.

RESTFUL API와 상호 작용하는 공장을 만들고 자동 완료 제안에 사용될 JSON을 반환합니다. JSON 데이터를 사용하고 TypeAhead 입력 필드를 캡슐화하는 지침을 만듭니다.
• 최종 사용자가 다음 옵션을 구성 할 수 있도록 지침 구성 가능성을 유지하십시오.
• 구성 옵션
제안의 일부로 표시하는 정확한 JSON 객체 속성.
• 선택한 항목을 보유 할 컨트롤러 범위의 모델.
항목을 선택할 때 실행되는 컨트롤러 범위의 함수.

타이핑 입력 필드의 자리 표시 자 텍스트 (프롬프트) 1 단계 : 데이터를 얻기위한 공장 구축 첫 번째 단계는 Angular의 $ HTTP 서비스를 사용하여 RESTFUL API와 상호 작용하는 공장을 만들어 봅시다. 다음 스 니펫을 살펴보십시오. 이전 코드는 API에서 JSON 데이터를 검색하는 DataFactory라는 공장을 만듭니다. 우리는 공장의 세부 사항을 다루지 않을 것이지만 $ HTTP 서비스가 어떻게 작동하는지 간단히 이해해야합니다. URL을 get () 함수로 전달하여 약속을 반환합니다. 이 약속에 대한 또 다른 전화는 또 다른 약속을 반환합니다 (우리는이 약속을 공장의 get (get () 함수에서 반환). 이 약속은 성공 콜백의 반환 값으로 ()로 전달됩니다. 따라서 컨트롤러 내부에서는 $ HTTP와 직접 상호 작용하지 않습니다. 대신 컨트롤러에서 공장 인스턴스를 요청하고 URL과 함께 get () 함수를 호출합니다. 따라서 공장과 상호 작용하는 컨트롤러 코드는 다음과 같습니다.

<span>var typeAhead = angular.module('app', []);
</span>
typeAhead<span>.factory('dataFactory', function($http) {
</span>  <span>return {
</span>    <span>get: function(url) {
</span>      <span>return $http.get(url).then(function(resp) {
</span>        <span>return resp.data; // success callback returns this
</span>      <span>});
</span>    <span>}
</span>  <span>};
</span><span>});</span>

이전 코드는 미국 상태의 JSON 목록을 반환하는 states.json이라는 API 엔드 포인트를 사용합니다. 데이터를 사용할 수 있으면 스코프 모델 항목에 목록을 저장합니다. 또한 모델 이름을 사용하여 선택한 항목을 유지합니다. 마지막으로, 사용자가 특정 상태를 선택하면 OnitemSelected () 함수가 실행됩니다. 2 단계 : 지침 생성 아래에 표시된 TypeAhead 지시문부터 시작하겠습니다.

typeAhead<span>.controller('TypeAheadController', function($scope<span>, dataFactory</span>) { // DI in action
</span>  dataFactory<span>.get('states.json').then(function(data) {
</span>    $scope<span>.items = data;
</span>  <span>});
</span>  $scope<span>.name = ''; // This will hold the selected item
</span>  $scope<span>.onItemSelected = function() { // this gets executed when an item is selected
</span>    <span>console.log('selected=' + $scope.name);
</span>  <span>};
</span><span>});</span>

지침에서 우리는 여러 속성을 정의하는 격리 된 범위를 만들고 있습니다.

항목 : JSON 목록을 격리 된 범위로 전달하는 데 사용됩니다.

프롬프트 : 타이핑 입력 필드에 대한 자리 표시 자 텍스트를 전달하기위한 한 가지 방법. 제목 및 자막 : 자동 완료 필드의 각 항목에는 제목과 자막이 있습니다. 대부분의 타이핑 위젯은 이런 식으로 작동합니다. 그들은 일반적으로 (항상 그런 것은 아니더라도) 드롭 다운 제안에서 각 항목에 대해 두 개의 필드를 가지고 있습니다. JSON 객체에 추가 특성이있는 경우, 이는 드롭 다운의 각 제안에 표시 될 두 가지 속성을 전달하는 방법 역할을합니다. 우리의 경우 제목은 상태의 이름에 해당하는 반면 자막은 약어를 나타냅니다.

typeAhead<span>.directive('typeahead', function($timeout) {
</span>  <span>return {
</span>    <span>restrict: 'AEC',
</span>    <span>scope: {
</span>      <span>items: '=',
</span>      <span>prompt: '@',
</span>      <span>title: '@',
</span>      <span>subtitle: '@',
</span>      <span>model: '=',
</span>      <span>onSelect: '&amp;'
</span>    <span>},
</span>    <span>link: function(scope<span>, elem, attrs</span>) {
</span>    <span>},
</span>    <span>templateUrl: 'templates/templateurl.html'
</span>  <span>};
</span><span>});</span>

모델 : 선택을 저장하기위한 양방향 바인딩.

<:> OnSelect : 메소드 바인딩, 선택이 끝나면 컨트롤러 범위에서 함수를 실행하는 데 사용됩니다.

참고 : 예제 JSON 응답은 다음과 같습니다.

<span>var typeAhead = angular.module('app', []);
</span>
typeAhead<span>.factory('dataFactory', function($http) {
</span>  <span>return {
</span>    <span>get: function(url) {
</span>      <span>return $http.get(url).then(function(resp) {
</span>        <span>return resp.data; // success callback returns this
</span>      <span>});
</span>    <span>}
</span>  <span>};
</span><span>});</span>

3 단계 : 템플릿을 만듭니다 이제 지침에서 사용할 템플릿을 만들어 봅시다.

먼저 사용자가 입력 할 입력 텍스트 필드를 렌더링합니다. 스코프 속성 프롬프트는 자리 표시 자 속성에 할당됩니다. 다음으로, 우리는 상태 목록을 반복하고 이름 및 약어 속성을 표시합니다. 이 속성 이름은 제목 및 자막 범위 속성을 통해 구성됩니다. 지침 NG-M-MouseEnter 및 NG 클래스는 사용자가 마우스로 호버링 할 때 항목을 강조하는 데 사용됩니다. 다음으로, 우리는 필터 : 모델을 사용합니다.이 모델은 입력 필드에 입력 된 텍스트별로 목록을 필터링합니다. 마지막으로, 우리는 입력 텍스트 필드가 비어 있거나 사용자가 항목을 선택했을 때 NG-Hide 지시문을 사용하여 목록을 숨겼습니다. 선택한 속성은 핸들 사이드 () 함수 내부에서 true로 설정되었으며 누군가 입력 필드에 입력을 시작할 때 false false (제안 목록을 표시하기 위해)로 설정됩니다. 4 단계 : 링크 함수를 업데이트하십시오 다음으로 아래와 같이 지시문의 링크 기능을 업데이트하겠습니다.

함수 handleSelection ()은 선택한 상태 이름으로 범위 속성, 모델을 업데이트합니다. 그런 다음 현재 및 선택된 속성을 재설정합니다. 다음으로 onselect () 함수를 호출합니다. 할당 스코프 .model = selectedItem이 바운드 컨트롤러 스코프 속성을 즉시 업데이트하지 않기 때문에 지연이 추가됩니다. 모델이 선택한 항목으로 업데이트 된 후 컨트롤러 스코프 콜백 함수를 실행하는 것이 바람직합니다. 이것이 우리가 $ 타임 아웃 서비스를 사용한 이유입니다. 또한, 함수 iscurrent () 및 setCurrent ()는 템플릿에서 함께 사용하여 자동 완전 제안의 항목을 강조합니다. 다음 CSS는 하이라이트 프로세스를 완료하는 데 사용됩니다.

typeAhead<span>.controller('TypeAheadController', function($scope<span>, dataFactory</span>) { // DI in action
</span>  dataFactory<span>.get('states.json').then(function(data) {
</span>    $scope<span>.items = data;
</span>  <span>});
</span>  $scope<span>.name = ''; // This will hold the selected item
</span>  $scope<span>.onItemSelected = function() { // this gets executed when an item is selected
</span>    <span>console.log('selected=' + $scope.name);
</span>  <span>};
</span><span>});</span>

5 단계 : 지침을 구성하고 사용하십시오 마지막으로 아래와 같이 HTML에서 지침을 호출하겠습니다.

결론

typeAhead<span>.directive('typeahead', function($timeout) {
</span>  <span>return {
</span>    <span>restrict: 'AEC',
</span>    <span>scope: {
</span>      <span>items: '=',
</span>      <span>prompt: '@',
</span>      <span>title: '@',
</span>      <span>subtitle: '@',
</span>      <span>model: '=',
</span>      <span>onSelect: '&amp;'
</span>    <span>},
</span>    <span>link: function(scope<span>, elem, attrs</span>) {
</span>    <span>},
</span>    <span>templateUrl: 'templates/templateurl.html'
</span>  <span>};
</span><span>});</span>

이 자습서는 구성 옵션을 사용하여 AngularJS Typeahead 위젯을 만드는 방법을 보여주었습니다. 전체 소스 코드는 Github에서 다운로드 할 수 있습니다. 무언가가 불분명하거나 무엇이든 개선하고 싶다면 자유롭게 의견을 말하십시오. 또한 라이브 데모를 확인하는 것을 잊지 마십시오. angularjs { "name": "Alabama", "abbreviation": "AL" }로 타이핑 위젯을 만드는 데 자주 묻는 질문 typeahead 드롭 다운의 모양을 사용자 정의 할 수있는 방법은 무엇입니까?

CSS를 사용하여 Typehead 드롭 다운의 모양을 사용자 정의 할 수 있습니다. 클래스 .dropdown-menu를 사용하여 드롭 다운 메뉴를 타겟팅 할 수 있습니다. 예를 들어, 배경색과 글꼴 색상을 변경하려면 다음 CSS 코드를 사용할 수 있습니다. .Dropdown-menu {

<span><span><span><input</span> type<span>="text"</span> ng-model<span>="model"</span> placeholder<span>="{{prompt}}"</span> ng-keydown<span>="selected=false"</span> /></span>
</span><span><span><span><br</span>/></span>
</span>
<span><span><span><div</span> class<span>="items"</span> ng-hide<span>="!model.length || selected"</span>></span>
</span>  <span><span><span><div</span> class<span>="item"</span> ng-repeat<span>="item in items | filter:model  track by $index"</span> ng-click<span>="handleSelection(item[title])"</span> <span>style<span>="<span>cursor:pointer</span>"</span></span> ng-class<span>="{active:isCurrent($index)}"</span> ng-mouseenter<span>="setCurrent($index)"</span>></span>
</span>    <span><span><span><p</span> class<span>="title"</span>></span>{{item[title]}}<span><span></p</span>></span>
</span>    <span><span><span><p</span> class<span>="subtitle"</span>></span>{{item[subtitle]}}<span><span></p</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

배경 색상 : #f8f9fa;

색상 : #. 343a40; 주 CSS 파일 또는 html 파일의

컨트롤러에서 onselect 함수를 이와 같이 정의 할 수 있습니다. :

$ scope.onselect = function (item, model, label) {

// 선택한 항목 };

어떻게 할 수 있습니까? Angularjs에서 bootstrap과 함께 typeahead를 사용하십시오.
angularjs에 bootstrap과 함께 Typeahead를 사용하려면 AngularJS 응용 프로그램에 ui.bootstrap 모듈을 포함시켜야합니다. 이 모듈은 Bootstrap의 마크 업 및 CSS를 기반으로 한 AngularJS 지침 세트를 제공합니다. TypeAhead 지시문은 다음과 같이 사용할 수 있습니다.
이 예에서는 상태가 상태 배열, $ viewValue는 사용자가 입력 한 값이며 Limitto : 8 제안 수를 8로 제한합니다. Angularjs?
angularjs의 원격 데이터와 함께 Typeahead를 사용하려면 $ http 서비스를 사용하여 원격 서버에서 데이터를 가져올 수 있습니다. TypeAhead 속성을 사용하여 입력 필드를 페치 된 데이터에 바인딩 할 수 있습니다. 예를 들면 :
$ scope.getStates = function (val) {
return $ http.get ( '/api/states', { params : { 이름 : val
}

}). 그런 다음 (함수 (응답) {

return response.data.map (function (item) { return item.name; });

});

};
html에서 getstates 함수를 사용할 수 있습니다. getStates ($ viewValue) "... />
이 예에서는 GetStates가 사용자. <..>

위 내용은 AngularJS -SitePoint로 타이핑 위젯 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!