AngularJS => 기본 제공 지시문

각도 표현 - 텍스트 대 숫자

이 예제는 입력 요소에 type="text" 및 type="number" 를 사용할 때 각도 표현식이 평가되는 방법을 보여줍니다. 다음 제어기와 뷰를 고려하십시오.

제어 장치

 var app = angular.module('app', []);

 app.controller('ctrl', function($scope) {
     $scope.textInput = {
         value: '5'
     };     
     $scope.numberInput = {
         value: 5
     };
 });

전망

<div ng-app="app" ng-controller="ctrl">
    <input type="text" ng-model="textInput.value">
    {{ textInput.value + 5 }}
    <input type="number" ng-model="numberInput.value">
    {{ numberInput.value + 5 }}
</div>

텍스트 입력에 바인드 된 표현식에 + 를 사용하면 연산자가 문자열을 연결 하여 (첫 번째 예) 스크린에 55를 표시합니다 * .
숫자 입력에 연결된 표현식에 + 를 사용하면 연산자는 숫자의 합계 를 반환하고 (두 번째 예) 스크린에 * 합니다.

* - 사용자가 입력 필드에서 값을 변경하기 전까지는, 그 후에 디스플레이가 그에 따라 변경됩니다.

실례

ngRepeat

ng-repeat 는 배열 또는 객체를 반복하고 컬렉션의 각 항목에 대해 한 번 요소를 반복 할 수있는 Angular의 내장 지시문입니다.

배열 반복

<ul>
    <li ng-repeat="item in itemCollection">
       {{item.Name}}
    </li>
</ul>

어디에:
item = 컬렉션의 개별 항목
itemCollection = 반복하는 배열

객체 반복

<ul>
    <li ng-repeat="(key, value) in myObject">
       {{key}} : {{value}}
    </li>
</ul>

어디에:
key = 속성 이름
value = 속성 값
myObject = 반복하는 객체

사용자 입력에 의한 ng-repeat 필터링

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText">
       {{string}}
    </li>
</ul>

어디에:
searchText = 사용자가 목록을 필터링하려는 텍스트
stringArray = 문자열 배열 (예 : ['string', 'array']

as aliasName 과 함께 필터 출력에 별명을 지정하여 다른 곳에서 필터링 된 항목을 표시하거나 참조 할 수도 있습니다.

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText as filteredStrings">
       {{string}}
    </li>
</ul>
<p>There are {{filteredStrings.length}} matching results</p>

ng-repeat-start 및 ng-repeat-end

시작점과 끝점을 정의하여 여러 DOM 요소를 반복하려면 ng-repeat-start 및 ng-repeat-end 지시어를 사용할 수 있습니다.

<ul>
    <li ng-repeat-start="item in [{a: 1, b: 2}, {a: 3, b:4}]">
        {{item.a}}
    </li>
    <li ng-repeat-end>
        {{item.b}}
    </li>
</ul>

산출:

항상 ng-repeat-start 를 ng-repeat-end 닫는 것이 중요합니다.

변수

ng-repeat 는 또한 표현식 안에 이러한 변수를 노출합니다.

변하기 쉬운	유형	세부
`$index`	번호	현재 반복의 인덱스와 같습니다 ($ index === 0은 첫 번째 반복 요소에서 true로 평가됩니다; `$first` 참조)
`$first`	부울	첫 번째 반복 요소에서 true로 평가됩니다.
`$last`	부울	마지막으로 반복 된 요소에서 true로 평가됩니다.
`$middle`	부울	요소가 `$first` 와 `$last` 사이에 있으면 true로 평가됩니다.
`$even`	부울	짝수 번 반복에서 true로 평가합니다 ( `$index%2===0` ).
`$odd`	부울	홀수 번 반복에서 true로 평가합니다 ( `$index%2===1` ).

성능 고려 사항

특히 대규모 컬렉션을 사용할 때 ngRepeat 렌더링이 느려질 수 있습니다.

컬렉션의 개체에 식별자 속성이 있으면 기본 기능인 전체 개체 대신 식별자로 항상 track by 해야합니다. 식별자가 없으면 항상 내장 $index 사용할 수 있습니다.

<div ng-repeat="item in itemCollection track by item.id">
<div ng-repeat="item in itemCollection track by $index">

ngRepeat의 범위

ngRepeat 는 항상 격리 된 하위 범위를 만듭니다. 따라서 부모 범위를 반복 내부에서 액세스해야하는 경우주의해야합니다.

다음은 ngRepeat 내부의 click 이벤트에서 상위 범위의 값을 설정하는 방법을 보여주는 간단한 예제입니다.

scope val:  {{val}}<br/>
ctrlAs val: {{ctrl.val}}
<ul>
    <li ng-repeat="item in itemCollection">
        <a href="#" ng-click="$parent.val=item.value; ctrl.val=item.value;">
            {{item.label}} {{item.value}}
        </a>
    </li>
</ul>

$scope.val = 0;
this.val = 0;

$scope.itemCollection = [{
    id: 0,
    value: 4.99,
    label: 'Football'
},
{
    id: 1,
    value: 6.99,
    label: 'Baseball'
},
{
    id: 2,
    value: 9.99,
    label: 'Basketball'
}];

ng-click 에서 val = item.value 만있는 경우 격리 된 범위로 인해 상위 범위의 val 을 업데이트하지 않습니다. 그렇기 때문에 상위 범위는 $parent 참조 또는 controllerAs 구문 (예 : ng-controller="mainController as ctrl" )을 사용하여 액세스 할 수 있습니다.

중첩 된 반복

중첩 된 ng-repeat를 사용할 수도 있습니다.

<div ng-repeat="values in test">
    <div ng-repeat="i in values">
      [{{$parent.$index}},{{$index}}] {{i}}
    </div>
</div>

var app = angular.module("myApp", []);
app.controller("ctrl", function($scope) {
  $scope.test = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f']
  ];
});

여기 ng-repeat 하위의 ng-repeat 색인에 액세스하려면 $parent.$index 사용할 수 있습니다.

ngShow 및 ngHide

ng-show 지시어는 전달 된 표현식이 참인지 거짓인지에 따라 HTML 요소를 표시하거나 숨 깁니다. 표현의 가치가 거짓이면 숨길 것입니다. 그것이 사실이라면 그것은 나타날 것입니다.

ng-hide 지시어는 비슷합니다. 그러나 값이 거짓이면 HTML 요소가 표시됩니다. 표현이 진실이면 그것을 숨길 것입니다.

JSBin 작업 예제

컨트롤러 :

var app = angular.module('app', []);
  
angular.module('app')
  .controller('ExampleController', ExampleController);
 
function ExampleController() {
  
  var vm = this;
  
  //Binding the username to HTML element
  vm.username = '';
  
  //A taken username
  vm.taken_username = 'StackOverflow';
  
}

전망

<section ng-controller="ExampleController as main">
    
    <p>Enter Password</p>
    <input ng-model="main.username" type="text">
    
    <hr>
    
    <!-- Will always show as long as StackOverflow is not typed in -->
    <!-- The expression is always true when it is not StackOverflow -->
    <div style="color:green;" ng-show="main.username != main.taken_username">
      Your username is free to use!
    </div>
    
    <!-- Will only show when StackOverflow is typed in -->
    <!-- The expression value becomes falsy -->
    <div style="color:red;" ng-hide="main.username != main.taken_username">
      Your username is taken!
    </div>
    
    <p>Enter 'StackOverflow' in username field to show ngHide directive.</p>
    
 </section>

ngOptions

ngOptions 은 모델에 저장 될 배열의 항목 선택을위한 html 드롭 다운 상자의 작성을 단순화하는 지시어입니다. ngOptions 속성은 ngOptions 이해 표현을 평가하여 얻은 배열 또는 객체를 사용하여 <select> 요소에 대한 <option> 요소 목록을 동적으로 생성하는 데 사용됩니다.

ng-options 하면 마크 업을 select 태그로 줄일 수 있으며 지시문은 동일한 선택을 만듭니다.

<select ng-model="selectedFruitNgOptions" 
        ng-options="curFruit as curFruit.label for curFruit in fruit">
</select>

이 만드는 꽃밥 방법 select 하여 옵션 ng-repeat 있지만 사용하지 않는 것이 좋습니다 ng-repeat 이 대부분, 같은 일반적인 목적으로 사용되는 forEach 단지 루프. 반면 ng-options 은 특별히 select 태그 옵션을 만드는 데 사용됩니다.

위의 예제에서는 ng-repeat 를 사용합니다.

<select ng-model="selectedFruit">
    <option ng-repeat="curFruit in fruit" value="{{curFruit}}">
        {{curFruit.label}}
    </option>
</select>

전체 예제

위의 예제를 약간 변형하여 자세하게 살펴 보도록하겠습니다.

예제를위한 데이터 모델 :

$scope.fruit = [
    { label: "Apples", value: 4, id: 2 },
    { label: "Oranges", value: 2, id: 1 },
    { label: "Limes", value: 4, id: 4 },
    { label: "Lemons", value: 5, id: 3 }
];

<!-- label for value in array -->
<select ng-options="f.label for f in fruit" ng-model="selectedFruit"></select>

선택 항목에 생성 된 옵션 태그 :

 <option value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

효과 :

f.label 은 <option> 의 레이블이되고 값은 전체 객체를 포함합니다.

전체 예제

<!-- select as label for value in array -->
<select ng-options="f.value as f.label for f in fruit" ng-model="selectedFruit"></select>

선택 항목에 생성 된 옵션 태그 :

 <option value="4"> Apples </option>

효과 :

레이블이 여전히 동일한 동안 f.value (4)는이 경우 값이됩니다.

전체 예제

<!-- label group by group for value in array -->
<select ng-options="f.label group by f.value for f in fruit" ng-model="selectedFruit"></select>

선택 항목에 생성 된 옵션 태그 :

<option value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

효과 :

옵션은 value 따라 그룹화됩니다. 같은 value 을 가진 옵션은 하나의 카테고리에 속합니다.

전체 예제

<!-- label disable when disable for value in array -->
<select ng-options="f.label disable when f.value == 4 for f in fruit" ng-model="selectedFruit"></select>

선택 항목에 생성 된 옵션 태그 :

<option disabled="" value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

효과 :

disable when f.value==4 상태로 인해 "사과"및 "Limes"가 비활성화됩니다 (선택할 수 없음). value=4 모든 옵션은 비활성화되어야합니다

전체 예제

<!-- label group by group for value in array track by trackexpr -->
<select ng-options="f.value as f.label group by f.value for f in fruit track by f.id" ng-model="selectedFruit"></select>

선택 항목에 생성 된 옵션 태그 :

<option value="4"> Apples </option>

효과 :

trackBy 사용할 때 시각적 인 변화는 없지만, Angular는 가장 좋은 해결책 인 참조에 의한 대신 id 의한 변경을 감지합니다.

전체 예제

<!-- label for value in array | orderBy:orderexpr track by trackexpr -->
<select ng-options="f.label for f in fruit | orderBy:'id' track by f.id" ng-model="selectedFruit"></select>

선택 항목에 생성 된 옵션 태그 :

<option disabled="" value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

효과 :

orderBy 는 옵션을 오름차순으로 정렬하는 AngularJS 표준 필터입니다 (기본값). 따라서이 항목의 "Oranges"는 id = 1부터 1st로 표시됩니다.

전체 예제

ng-options 포함한 모든 <select> 에는 ng-model 첨부되어 있어야합니다.

ngModel

ng-model을 사용하면 변수를 모든 유형의 입력 필드에 바인딩 할 수 있습니다. 이중 중괄호 (예 : {{myAge}} 사용하여 변수를 표시 할 수 있습니다.

<input type="text" ng-model="myName">
<p>{{myName}}</p>

입력 필드에 입력하거나 어떤 식 으로든 변경하면 즉시 단락의 값이 업데이트됩니다.

이 경우 ng-model 변수는 컨트롤러에서 $scope.myName 으로 사용할 수 있습니다. controllerAs 구문을 사용하는 경우 :

<div ng-controller="myCtrl as mc">
    <input type="text" ng-model="mc.myName">
    <p>{{mc.myName}}</p>
</div>

ng-controller 속성에 정의 된 컨트롤러의 별칭을 ng-model 변수에 선행으로 보냄으로써 컨트롤러의 범위를 참조해야합니다. 이 방법으로 ng-model 변수를 참조하기 위해 컨트롤러에 $scope 를 삽입 할 필요가 없으며 변수는 컨트롤러 기능 내 this.myName 으로 사용할 수 있습니다.

응급실

사용자의 상태를 보여줄 필요가 있고 사용 가능한 여러 CSS 클래스가 있다고 가정 해 봅시다. Angular를 사용하면 조건을 포함하는 객체 목록을 지정할 수있는 가능한 여러 클래스 목록에서 선택하기가 매우 쉽습니다. Angular는 조건의 진실성을 기반으로 올바른 클래스를 사용할 수 있습니다.

개체에는 키 / 값 쌍이 있어야합니다. 키는 값 (조건부)이 true로 평가 될 때 적용될 클래스 이름입니다.

<style>
    .active { background-color: green; color: white; }
    .inactive { background-color: gray; color: white; }
    .adminUser { font-weight: bold; color: yellow; }
    .regularUser { color: white; }
</style>

<span ng-class="{ 
    active: user.active, 
    inactive: !user.active, 
    adminUser: user.level === 1, 
    regularUser: user.level === 2 
}">John Smith</span>

Angular는 $scope.user 객체를 검사하여 active 상태와 level 봅니다. 변수의 값에 따라 Angular는 일치 스타일을 <span> 적용합니다.

예

ng-if 는 ng-show 와 유사한 지시어이지만 단순히 숨기기 대신 DOM에서 요소를 삽입하거나 제거합니다. Angular 1.1.5에서는 ng-If 지시어를 도입했습니다. ng-if 지시어를 1.1.5 버전 이상으로 사용할 수 있습니다. 이것은 Angular가 제거 된 ng-if 내의 요소에 대한 다이제스트를 처리하지 않기 때문에 유용합니다. 특히 복잡한 데이터 바인딩의 경우 Angular의 작업량을 줄이는 ng-if 유용합니다.

ng-show 와 달리 ng-show ng-if 지시문은 프로토 타입 상속을 사용하는 하위 범위를 만듭니다. 즉, 하위 범위에 대한 프리미티브 값 설정은 부모에게는 적용되지 않습니다. 부모 범위에서 프리미티브를 설정하려면 자식 범위의 $parent 속성을 사용해야합니다.

자바 스크립트

angular.module('MyApp', []);

angular.module('MyApp').controller('myController', ['$scope', '$window', function myController($scope, $window) {
    $scope.currentUser= $window.localStorage.getItem('userName');
}]);

전망

<div ng-controller="myController">
    <div ng-if="currentUser">
        Hello, {{currentUser}}
    </div>
    <div ng-if="!currentUser">
        <a href="/login">Log In</a>
        <a href="/register">Register</a>
    </div>
</div>

DOM의 경우 `currentUser` 정의되지 않은 수 없다

<div ng-controller="myController">
    <div ng-if="currentUser">
        Hello, {{currentUser}}
    </div>
    <!-- ng-if: !currentUser -->
</div>

`currentUser` 가 정의되지 않은 경우 DOM

<div ng-controller="myController">
    <!-- ng-if: currentUser -->
    <div ng-if="!currentUser">
        <a href="/login">Log In</a>
        <a href="/register">Register</a>
    </div>
</div>

실례

기능 약속

ngIf 지시어는 함수를 받아들입니다. 논리적으로 true 또는 false를 반환해야합니다.

<div ng-if="myFunction()">
    <span>Span text</span>
</div>

스팬 텍스트는 함수가 true를 반환하는 경우에만 나타납니다.

$scope.myFunction = function() {
    var result = false;
    // Code to determine the boolean value of result 
    return result;
};

Angular 표현식과 마찬가지로이 함수는 모든 종류의 변수를 허용합니다.

ngMouseenter 및 ngMouseleave

ng-mouseenter 및 ng-mouseleave 지시문은 이벤트를 실행하고 DOM 요소를 가리키거나 가져올 때 CSS 스타일을 적용하는 데 유용합니다.

ng-mouseenter 지시문은 마우스 입력 이벤트 중 하나를 실행합니다 (이 지시문이있는 DOM 요소 위에 마우스 포인터를 올려 놓으면)

HTML

<div ng-mouseenter="applyStyle = true" ng-class="{'active': applyStyle}">

위의 예에서 사용자가 div 위로 마우스를 applyStyle 이 true 바뀌고 ng-class 에서 .active CSS 클래스가 적용됩니다.

ng-mouseleave 지시문은 마우스 exit 이벤트와 같은 표현식을 실행합니다 (이 지시문이있는 DOM 요소에서 마우스 커서를 ng-mouseleave 때).

HTML

<div ng-mouseenter="applyStyle = true" ng-mouseleaver="applyStyle = false" ng-class="{'active': applyStyle}">

첫 번째 예제를 다시 사용하면 사용자가 div에서 마우스 포인터를 가져 가면 .active 클래스가 제거됩니다.

ngDisabled

이 지시문은 특정 기존 조건을 기반으로 입력 이벤트를 제한하는 데 유용합니다.

ng-disabled 지시어는 진위 또는 위조 된 값으로 평가되어야하는 표현을 받아들입니다.

ng-disabled 는 input 요소에 조건부로 disabled 특성을 적용하는 데 사용됩니다.

HTML

<input type="text" ng-model="vm.name">

<button ng-disabled="vm.name.length===0" ng-click="vm.submitMe">Submit</button>

vm.name.length===0 은 input 의 길이가 0 인 경우 true로 평가되고, 버튼이 비활성화되면 ng-click 의 click 이벤트를 발생 vm.name.length===0 못하도록합니다

ngDblclick

ng-dblclick 지시문은 두 번 클릭 이벤트를 DOM 요소에 바인딩하려는 경우에 유용합니다.

이 지시문은 표현식을 허용합니다.

HTML

<input type="number" ng-model="num = num + 1" ng-init="num=0">

<button ng-dblclick="num++">Double click me</button>

위의 예에서 버튼을 두 번 클릭하면 input 유지 된 값이 증가합니다.

붙박이 지시어 치트 시트

ng-app AngularJS 섹션을 설정합니다.

ng-init 디폴트 변수 값을 설정합니다.

ng-bind {{}} 템플리트의 대안.

ng-bind-template 여러 표현식을 뷰에 바인드합니다.

ng-non-bindable 데이터가 바인드 가능하지 않음을 나타냅니다.

ng-bind-html HTML 요소의 내부 HTML 속성을 ng-bind-html 합니다.

ng-change 사용자가 입력을 변경할 때 지정된 표현식을 평가합니다.

ng-checked 체크 박스를 설정합니다.

ng-class css 클래스를 동적으로 설정합니다.

ng-cloak AngularJS가 제어권을 행사할 때까지 콘텐츠를 표시하지 않습니다.

ng-click 요소를 클릭 할 때 메서드 또는 표현식을 실행합니다.

ng-controller 뷰에 컨트롤러 클래스를 연결합니다.

ng-disabled 폼 요소의 disabled 속성을 제어합니다.

ng-form 설정합니다.

ng-href AngularJS 변수를 href 속성에 동적으로 바인드합니다.

ng-include 외부 HTML 단편을 가져 와서 컴파일하고 페이지에 포함시키는 데 사용됩니다.

ng-if 표현식에 따라 DOM에서 요소를 제거하거나 다시 작성합니다.

ng-switch 일치하는 표현식에 따라 조건부로 제어를 전환합니다.

ng-model 입력, select, textarea 등의 요소를 model 속성으로 바인딩합니다.

ng-readonly 전용 속성을 요소에 설정하는 데 사용됩니다.

ng-repeat 컬렉션의 각 항목을 ng-repeat 하여 새 템플릿을 만듭니다.

ng-selected 요소에서 선택된 옵션을 설정하는 데 사용됩니다.

ng-show/ng-hide 표현식을 기반으로 요소를 표시하거나 숨 깁니다.

ng-src AngularJS 변수를 src 속성에 동적으로 바인드합니다.

ng-submit 각도 표현을 onsubmit 이벤트에 바인딩합니다.

ng-value 각도 표현식을의 값에 바인드합니다.

ng-required 각도 표현식을 onsubmit 이벤트에 바인드합니다.

ng-style HTML 요소에 CSS 스타일을 설정합니다.

ng-pattern ngModel에 패턴 유효성 검사기를 추가합니다.

ng-maxlength ngModel에 maxlength 유효성 검사기를 추가합니다.

ng-minlength ngModel에 minlength 유효성 검사기를 추가합니다.

ng-classeven 와 함께 작동하고 홀수 (짝수) 행에만 적용됩니다.

ng-classodd 와 함께 작동하고 홀수 (짝수) 행에만 적용됩니다.

ng-cut 자르기 이벤트에 대한 사용자 정의 동작을 지정하는 데 사용됩니다.

ng-copy 복사 이벤트에 대한 사용자 정의 동작을 지정하는 데 사용됩니다.

ng-paste 넣기 이벤트에 대한 사용자 정의 동작을 지정하는 데 사용됩니다.

ng-options 요소에 대한 요소 목록을 동적으로 생성하는 데 사용됩니다.

ng-list 지정된 구분 기호를 기반으로 문자열을 목록으로 변환하는 데 사용됩니다.

ng-open ngOpen 내부의 표현이 진실 인 경우 요소의 열린 속성을 설정하는 데 사용됩니다.

소스 (조금 편집 됨)

ngClick

ng-click 지시문은 click 이벤트를 DOM 요소에 연결합니다.

ng-click 지시문을 사용하면 DOM의 요소를 클릭 할 때 사용자 정의 동작을 지정할 수 있습니다.

클릭 이벤트를 버튼에 첨부하여 컨트롤러에서 처리하려는 경우에 유용합니다.

이 지시문은 $event 로 사용할 수있는 이벤트 객체가있는 표현식을 허용합니다.

HTML

<input ng-click="onClick($event)">Click me</input>

제어 장치

.controller("ctrl", function($scope) {   
    $scope.onClick = function(evt) {
        console.debug("Hello click event: %o ",evt);
    } 
})

HTML

<button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
</span>

HTML

<button ng-click="count()" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
</span>

제어 장치

...

$scope.count = function(){
    $scope.count = $scope.count + 1;
}
...

버튼을 클릭하면 onClick 함수를 호출하면 "Hello click event"다음에 이벤트 객체가 인쇄됩니다.

필수

ng-required 추가하거나 제거 required 차례로 활성화 및 비활성화 할 요소에 확인 속성 require 에 대한 검증 키 input .

input 요소가 비어 있지 않은 값을 가져야하는지 여부를 선택적으로 정의하는 데 사용됩니다. 이 지시문은 복잡한 HTML 양식에 대한 유효성 검증을 설계 할 때 유용합니다.

HTML

<input type="checkbox" ng-model="someBooleanValue">
<input type="text" ng-model="username" ng-required="someBooleanValue">

NG 모델 옵션

ng-model-options 사용하면 ng-model-options 의 기본 동작을 변경할 수 ng-model 지시어는 ng-model이 업데이트 될 때 실행되는 이벤트를 등록하고 디버그 효과를 첨부 할 수 있습니다.

이 지정 문은 정의 오브젝트 또는 범위 값에 대한 참조로 평가 될 표현식을 승인합니다.

예:

<input type="text" ng-model="myValue" ng-model-options="{'debounce': 500}">

위의 예제는 myValue 에 500 밀리 초의 디 바운스 효과를 첨부하여 사용자가 입력에 대해 타이핑을 마친 후 (즉, myValue 가 업데이트를 완료 한 후) 500 밀리 초를 업데이트하도록 input .

사용 가능한 개체 속성

updateOn : 입력에 바인딩 할 이벤트를 지정합니다.

ng-model-options="{ updateOn: 'blur'}" // will update on blur

debounce : 모델 업데이트에 대한 몇 밀리 초의 지연을 지정합니다.
```
ng-model-options="{'debounce': 500}" // will update the model after 1/2 second
```
allowInvalid : 모델에 유효하지 않은 값을 허용하는 부울 값 플래그. 기본 양식 유효성 검사를 우회하여 기본적으로이 값은 undefined 것으로 처리됩니다.
getterSetter : ng-model 을 일반 모델 값 대신 getter / setter 함수로 처리할지 여부를 나타내는 부울 플래그입니다. 그러면 함수가 실행되어 모델 값을 반환합니다.
예:
```
<input type="text" ng-model="myFunc" ng-model-options="{'getterSetter': true}">

$scope.myFunc = function() {return "value";}
```
timezone : 입력이 date 또는 time 인 경우 모델의 시간대를 정의합니다. 유형

금고

ngCloak 지시문은 Angular html 템플릿이 응용 프로그램이로드되는 동안 원시 (컴파일되지 않은) 양식으로 브라우저에 잠시 표시되는 것을 방지하는 데 사용됩니다. - 소스보기

HTML

<div ng-cloak>
  <h1>Hello {{ name }}</h1>
</div>

ngCloak 을 본문 요소에 적용 할 수 있지만 브라우저보기를 점진적으로 렌더링 할 수 있도록 페이지의 작은 부분에 여러 개의 ngCloak 지시문을 적용하는 것이 좋습니다.

ngCloak 지시문에는 매개 변수가 없습니다.

또한보십시오 : 깜박 거림 방지하기

포함

ng-include를 사용하면 페이지의 한 부분에 대한 제어를 특정 컨트롤러에 위임 할 수 있습니다. 이 구성 요소의 복잡성이 전용 컨트롤러의 모든 로직을 캡슐화하기 때문에 이렇게 할 수 있습니다.

예를 들면 다음과 같습니다.

  <div ng-include
       src="'/gridview'"
       ng-controller='gridController as gc'>
  </div>

/gridview 는 별개의 합법적 인 URL로 웹 서버에서 제공해야합니다.

또한 src -attribute에는 Angular 표현식을 사용할 수 있습니다. 예를 들어 변수 또는 함수 호출 일 수도 있고이 예 에서처럼 문자열 상수 일 수도 있습니다. 이 경우 소스 URL을 작은 따옴표로 묶어야 하므로 문자열 상수로 평가됩니다. 이것은 흔한 혼란의 원천입니다.

/gridview html 내에서 gridController 를 페이지 주위를 감싸는 것처럼 참조 할 수 있습니다. 예 :

<div class="row">
  <button type="button" class="btn btn-default" ng-click="gc.doSomething()"></button>
</div>

ngSrc

src 속성에서 {{hash}} 와 같은 앵귤러 마크 업을 사용하면 올바르게 작동하지 않습니다. 브라우저는 리터럴 텍스트로 URL에서 가져옵니다 {{hash}} 각도 내부 표현을 대체 할 때까지 {{hash}} . ng-src 지시문은 이미지 태그 요소의 원본 src 속성을 무시하고 문제를 해결합니다.

<div ng-init="pic = 'pic_angular.jpg'">
    <h1>Angular</h1>
    <img ng-src="{{pic}}">
</div>

ngPattern

ng-pattern 지시문은 정규 표현식 패턴을 평가하고 그 패턴을 사용하여 텍스트 입력의 유효성을 검사하는 표현식을 허용합니다.

예:

<input> 요소의 값 (ng-model)이 유효한 IP 주소 일 때 <input> 요소가 유효하게되기를 원합니다.

주형:

<input type="text" ng-model="ipAddr" ng-pattern="ipRegex" name="ip" required>

제어 장치:

$scope.ipRegex = /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;

ngValue

대부분 ng-repeat ngValue에서 사용하면 ngRepeat를 사용하여 라디오 버튼 목록을 동적으로 생성 할 때 유용합니다.

<script>
   angular.module('valueExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.names = ['pizza', 'unicorns', 'robots'];
       $scope.my = { favorite: 'unicorns' };
     }]);
</script>
 <form ng-controller="ExampleController">
   <h2>Which is your favorite?</h2>
     <label ng-repeat="name in names" for="{{name}}">
       {{name}}
       <input type="radio"
              ng-model="my.favorite"
              ng-value="name"
              id="{{name}}"
              name="favorite">
     </label>
   <div>You chose {{my.favorite}}</div>
 </form>

일하는 plnkr

ngCopy

ngCopy 지정 문은 복사 이벤트에서 실행될 동작을 지정합니다.

사용자가 데이터를 복사하지 못하도록 방지

<p ng-copy="blockCopy($event)">This paragraph cannot be copied</p>

컨트롤러에서

$scope.blockCopy = function(event) {
    event.preventDefault();
    console.log("Copying won't work");
}

응력

ngPaste 지시문은 사용자가 내용을 붙여 넣을 때 실행할 사용자 정의 비헤이비어를 지정합니다.

<input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>
pasted: {{paste}}

ngHref

우리가 href 값 안에 각도 표현식을 가지고 있다면, href 속성 대신에 ngHref가 사용됩니다. ngHref 지시문은 태그, 태그 등과 같은 href 속성을 사용하여 html 태그의 원래 href 속성을 덮어 씁니다.

ngHref 지시문은 AngularJS가 코드를 평가하기 전에 사용자가 링크를 클릭하더라도 링크가 끊어지지 않도록합니다.

예제 1

<div ng-init="linkValue = 'http://stackoverflow.com'">
    <p>Go to <a ng-href="{{linkValue}}">{{linkValue}}</a>!</p>
</div>

예제 2 이 예제는 입력 상자에서 href 값을 동적으로 가져 와서 href 값으로로드합니다.

<input ng-model="value" />
<a id="link" ng-href="{{value}}">link</a>

예제 3

<script>
angular.module('angularDoc', [])
.controller('myController', function($scope) {
  // Set some scope value.
  // Here we set bootstrap version.
  $scope.bootstrap_version = '3.3.7';
   
  // Set the default layout value
  $scope.layout = 'normal';
});
</script>
<!-- Insert it into Angular Code -->
<link rel="stylesheet" ng-href="//maxcdn.bootstrapcdn.com/bootstrap/{{ bootstrap_version }}/css/bootstrap.min.css">
<link rel="stylesheet" ng-href="layout-{{ layout }}.css">

ngList

ng-list 지시문은 구분 된 문자열을 텍스트 입력에서 문자열 배열로 또는 그 반대로 변환하는 데 사용됩니다.

ng-list 지시문은 ", " (쉼표 공백)의 기본 구분 기호를 사용합니다.

이 ng-list="; " 와 같이 delgiter에 ng-list delimeter를 지정하여 수동으로 구분 기호를 설정할 수 있습니다.

이 경우 구분 기호는 세미콜론 다음에 공백으로 설정됩니다.

기본적으로 ng-list 에는 ng-trim 속성이 ng-trim 속성은 true로 설정됩니다. false 일 때 ng-trim 은 구분 기호의 공백을 존중합니다. ng-trim="false" 를 설정하지 않으면 기본적으로 ng-list 는 공백을 고려하지 않습니다.

예:

angular.module('test', [])
  .controller('ngListExample', ['$scope', function($scope) {
    $scope.list = ['angular', 'is', 'cool!'];
}]);

고객 구분 기호는 다음과 같이 설정됩니다 ; . 입력 상자의 모델은 범위에서 생성 된 배열로 설정됩니다.

  <body ng-app="test" ng-controller="ngListExample">
    <input ng-model="list" ng-list="; " ng-trim="false">
  </body>

입력 상자는 내용과 함께 표시됩니다 : angular; is; cool!

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

AngularJS
기본 제공 지시문

수색…

각도 표현 - 텍스트 대 숫자

ngRepeat

ngShow 및 ngHide

ngOptions

ngModel

응급실

예

자바 스크립트

전망

DOM의 경우 `currentUser` 정의되지 않은 수 없다

`currentUser` 가 정의되지 않은 경우 DOM

기능 약속

ngMouseenter 및 ngMouseleave

ngDisabled

ngDblclick

붙박이 지시어 치트 시트

ngClick

필수

NG 모델 옵션

금고

포함

ngSrc

ngPattern

ngValue

ngCopy

사용자가 데이터를 복사하지 못하도록 방지

응력

ngHref

ngList

각도 표현 - 텍스트 대 숫자

ngRepeat

ngShow 및 ngHide

ngOptions

ngModel

응급실

예

자바 스크립트

전망

DOM의 경우 currentUser 정의되지 않은 수 없다

currentUser 가 정의되지 않은 경우 DOM

기능 약속

ngMouseenter 및 ngMouseleave

ngDisabled

ngDblclick

붙박이 지시어 치트 시트

ngClick

필수

NG 모델 옵션

금고

포함

ngSrc

ngPattern

ngValue

ngCopy

사용자가 데이터를 복사하지 못하도록 방지

응력

ngHref

ngList

DOM의 경우 `currentUser` 정의되지 않은 수 없다

`currentUser` 가 정의되지 않은 경우 DOM