AngularJS
ビルトインディレクティブ

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap
サーチ…


角括弧 - テキストと数値

この例では、input要素に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 *表示します。
  • 数値入力にバインドされた式で+を使用すると、演算子は数値の和を返し（2番目の例）、画面に*表示します* 。

* - ユーザーが入力フィールドの値を変更するまでです。その後、表示がそれに応じて変更されます。

実施例

ngRepeat

ng-repeatは、配列またはオブジェクトを繰り返し処理できるようにする、Angularの組み込みディレクティブです。コレクション内の各アイテムに対して要素を一度繰り返すことができます。

ng-配列を繰り返す 

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

場所：
item =コレクション内の個々のアイテム
itemCollection =反復処理する配列


ng-オブジェクトを繰り返す 

<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>

出力：

  • 1
  • 2
  • 3
  • 4

常にng-repeat-startをng-repeat-endすることが重要です。

変数

ng-repeatは、これらの変数も式の中に公開します

変数タイプ詳細
$index 数現在の反復のインデックスと等しくなります（$ index === 0は最初の反復要素で真と評価されます; $first参照してください）
$first ブール最初の反復要素で真と評価する
$last ブール最後の反復要素で真と評価する
$middle ブール要素が$firstと$last間にある場合、trueに評価されます。
$even ブール偶数番目の反復で真と評価します（ $index%2===0相当）
$odd ブール奇数番目の反復で真と評価されます（ $index%2===1と同等）

パフォーマンスの考慮事項

特に大規模なコレクションを使用する場合、 ngRepeatレンダリングが遅くなることがあります。

コレクション内のオブジェクトに識別子プロパティがある場合、オブジェクト全体ではなく識別子で常にtrack byする必要があります。これはデフォルトの機能です。識別子が存在しない場合は、常に組み込み$index使用でき$index 。 

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

ngRepeatの範囲

ngRepeatは常に独立した子スコープを作成するので、親スコープを繰り返し内でアクセスする必要がある場合は注意が必要です。

ここでは、 ngRepeat内のクリックイベントから親スコープの値を設定する方法を示す簡単な例を示します。 

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-controller="mainController as ctrl"ます。

ネストされたng-repeat

ネストされた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を作成します： 

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

ng-repeatを使用してselectオプションを作成select方法もありますが、for ng-repeat forEachだけをループさせるような一般的な目的のためにng-repeatを使用することはお勧めしません。 ng-optionsは特にselectタグオプションを作成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 。同じvalueを持つオプションは1つのカテゴリに分類されます

完全な例 

<!-- 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 、 disable when f.value==4の条件のため、 "Apples"と "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の標準フィルタで、オプションを昇順（デフォルト）に並べるので、 id = 1であるため、この中の「オレンジ」は1番目に表示されます。

完全な例

ng-optionsを含むすべての<select>はng-model添付されている必要がng-options 。

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は、条件を含むオブジェクトリストを指定できるいくつかのクラスのリストから選択することを非常に簡単にします。角度は、条件の真実性に基づいて正しいクラスを使用することができます。

オブジェクトにはキーと値のペアが含まれている必要があります。キーは、値（条件付き）が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>適用します。

ngIf

ng-ifはng-showと似ていますが、単純にng-showするのではなく、DOMから要素を挿入または削除します。 Angular 1.1.5では、ng-If命令が導入されました。 ng-ifディレクティブを1.1.5以上のバージョンで使用できます。これはAngularが削除されたng-if内の要素のダイジェストを処理しないため、特に複雑なデータバインディングのng-if 、Angularの作業負荷を軽減するng-if便利です。

ng-showとは異なり、 ng-ifディレクティブはプロトタイプ継承を使用する子スコープを作成します。つまり、子スコープのプリミティブ値を設定することは親には適用されません。親スコープのプリミティブを設定するには、子スコープの$parentプロパティを使用する必要があります。

JavaScript 

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>

currentUserが未定義の場合のDOM 

<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要素の上にマウスポインタをng-mouseenterと）

HTML 

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

上記の例では、ユーザーがdivにマウスをapplyStyleがtrueに変わり、 ng-classで.active CSSクラスが適用されます。

ng-mouseleaveディレクティブは、マウスexitイベントの1つの式を実行します（このディレクティブが存在するDOM要素からマウスカーソルを離したとき）

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クリックイベントを発生させない

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-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-include使用します。

ng-if式に応じてDOM内の要素を削除または再作成する

ng-switch一致する式に基づいて条件付きで制御を切り替えます。

ng-model input、select、textareaなどの要素をmodelプロパティでバインドします。

ng-readonly要素に読み取り専用属性を設定するために使用します。

ng-repeat新しいテンプレートを作成するために、コレクション内の各項目をループするときに使用します。

ng-selected要素に選択されたオプションを設定するために使用します。

ng-show/ng-hide式に基づいて要素を表示/ ng-show/ng-hide表示します。

ng-src AngularJS変数をsrc属性に動的にバインドします。

ng-submit角度式をonsubmitイベントにバインドします。

ng-value角度式をng-valueバインドします。

ng-required角式をonsubmitイベントにバインドします。

ng-style HTML要素にCSSスタイルを設定します。

ng-patternパターンバリデーターをngModelに追加します。

ng-maxlength maxlengthバリデーターをngModelに追加します。

ng-minlengthにminlengthバリデータを追加します。

ng-classeven ngRepeatと組み合わせて動作し、奇数（偶数）行にのみ有効です。

ng-classodd ngRepeatと組み合わせて動作し、奇数（偶数）行にのみ有効です。

ng-cutカットイベントのカスタム動作を指定するng-cut使用します。

ng-copyコピーイベントのカスタム動作を指定するために使用します。

ng-pasteペーストイベントのカスタム動作を指定するために使用します。

ng-options要素の要素のリストを動的に生成するために使用されます。

ng-list指定された区切り文字に基づいて文字列をリストに変換するために使用します。

ng-open ngOpen内の式が真実である場合、要素のオープン属性を設定するng-open使用されます。

ソース（少し編集）

ngClick

ng-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」とそれに続くイベントオブジェクトが表示されます。

ngRequired

ng-requiredは、要素のrequired検証属性を追加または削除しinput 。これにより、 input require検証キーが有効または無効になりinput 。

input要素が空でない値を持つ必要があるかどうかをオプションで定義するために使用されます。このディレクティブは、複雑なHTMLフォームの検証を設計する際に役立ちます。

HTML 

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

ng-model-options

ng-model-optionsのデフォルトの動作に変更することができますng-model 、このディレクティブはNG-モデルが更新されたときに発動するとデバウンス効果を添付するイベントを登録することができます。

このディレクティブは、定義オブジェクトまたはスコープ値への参照に評価される式を受け入れます。

例： 

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

上記の例では、上の500ミリ秒のデバウンス効果を付着するmyValueユーザが上入力し終わった後に、モデル500ミリ秒を更新する原因となる、 input （場合、つまりmyValue更新を終えました）。

使用可能なオブジェクトのプロパティ

  1. updateOn ：入力にバインドするイベントを指定します。 

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

  2. debounce ：モデル更新に向けて数ミリ秒の遅延を指定する

    ng-model-options="{'debounce': 500}" // will update the model after 1/2 second

  3. allowInvalid ：デフォルトのフォーム検証を回避して、モデルに無効​​な値を許可するブール値のフラグです。デフォルトでは、これらの値はundefinedとして扱われます。

  4. getterSetter ： ng-modelを単純モデル値ではなくゲッター/セッター関数として扱うかどうかを示すbooleanフラグ。関数が実行され、モデル値が返されます。

    例： 

    <input type="text" ng-model="myFunc" ng-model-options="{'getterSetter': true}">

$scope.myFunc = function() {return "value";}

  5. timezone ：入力がdateまたはtime場合、モデルのタイムゾーンを定義します。タイプ

クローク

ngCloakディレクティブは、アプリケーションがロードされている間に、 ngCloak HTMLテンプレートが生の（コンパイルされていない）フォームでブラウザによって短時間表示されないようにするために使用されます。 - ソースを表示

HTML 

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

ngCloakをbody要素に適用できますが、ブラウザビューのプログレッシブレンダリングを可能にするために、ページの小さな部分に複数のngCloakディレクティブを適用することをお勧めします。

ngCloakディレクティブにはパラメータはありません。

参照： ちらつき防止

インクルージョン

ng-includeを使用すると、ページの一部のコントロールを特定のコントローラに委任できます。そのコンポーネントの複雑さが、専用コントローラー内のすべてのロジックをカプセル化するようになっているので、これを行うことができます。

例は次のとおりです。 

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

/gridviewは、Webサーバーによって別個の正当なURLとして提供される必要があることに注意してください。

また、 src -attributeはAngular式を受け入れます。これは、変数または関数呼び出し、たとえばこの例のように文字列定数である可能性があります。この場合、ソースURLを一重引用符で囲むようにする必要があります 。そのため、文字列定数として評価されます。これは混乱の一般的な原因です。

/gridview html内では、 gridControllerをページの周りに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 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このような区切り文字ng-list="; " 。

この場合、区切り文字はセミコロンとそれに続くスペースに設定されます。

デフォルトでは、 ng-listはng-trimという属性があり、trueに設定されています。 ng-trimすると、デリミタの空白が尊重されます。デフォルトでは、 ng-list 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