ngモジュール

ng-model

ng-disable

概要

htmlではinputタグにdisabled要素が使える。
disabledを設定すると、そのinput要素は無効(非活性）となる。
ngDisabledディレクティブは動的にinput要素を有効・無効にするために使用する。
式がtrueの場合に、要素に属性"disabled"を設定する。

ng-change

概要

ビューの入力値を変更した際に、与えられた式が評価される。
モデルからの値の変更の際には、式は評価されない。

このディレクティブは、ngModelの提供が必要である。

使用例

例えばinputタグと併せて、テキストエリアに文字を入力した際に要素にfalseを設定する式とする。
ng-disableタグと併せて、ユーザがテキストエリアに入力した際に、「更新」ボタンを活性化させる使い方ができる。

<input type="text"
    class="form-control"
    ng-model="item.u_workstream"
    ng-change="change" 
    ng-model-options="{updateOn: 'blur'}"
>
<!-- 中略 -->
<button tabindex="0" name="submit2" ng-disabled="submitted" ng-click="triggerOnSubmit2()" class="btn btn-primary">Add</button>

コントローラ

$scope.change = function(){
    $scope.submitted = false;
};

ng-model-option

入力値のモデルへの反映タイミングを規定するために使用するディレクティブ。 https://www.buildinsider.net/web/angularjstips/0017 external_link