AngularJSにてHTMLのFormオプションの書き方など。
HTMLオプション
プルダウン
プルダウンが配列の時とオブジェクトのとき。通常はラベルと値が別々なのでオブジェクトのほうが多いはず。
配列型
|
1 2 3 |
$scope.years = [2010,2011,2012,2013,2014]; <!-- yearが展開される値になります。 --> <select ng-model="selectedYear" ng-options="year for year in years"></select> |
ラベル型
|
1 2 3 4 5 6 7 |
$scope.months = [ {label:"1月",value:"01"}, {label:"2月",value:"02"}, {label:"3月",value:"03"}, ]; $scope.selectedMonth; HTML <!-- 値 as ラベルという展開 --> <select ng-model="selectedMonth" ng-options="month.value as month.label + '月' for month in months"></select> |
AngularJSでselect要素にoptionをぶら下げる色々な方法
チェックボックス
主に帳票の一覧情報が出力されていてチェックされた時に帳票の伝票idを取得するなどのケースを想定
|
1 2 3 4 5 6 7 |
var reports =[ {'id':10 , ・・・} {'id':20, ・・・} ] <tr ng-repeat=" report in reports " > <input type="checkbox" ng-model="report.checked_id" ng-true-value="{{report.id}}" ng-false-value="" > </tr> |
https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
ラジオ
複数選択肢からの中から指定された値をいれることを前提
|
1 2 3 4 5 6 |
var expense ={ 'id':50 , 'task_span':"ここに選択された値が入る" } <label class="side" for="{{expense.id}}_1"><input id="{{expense.id}}_1" type="radio" ng-model="expense.task_span" value="10">選択肢A</label> <label class="side" for="{{expense.id}}_2"><input id="{{expense.id}}_2" type="radio" ng-model="expense.task_span" value="20">選択肢B</label> <label class="side" for="{{expense.id}}_3"><input id="{{expense.id}}_3" type="radio" ng-model="expense.task_span" value="30">選択肢C</label> |
disabled
上記のタグとはちょっと違うけどボタンのdisabledなどが簡単にできる機能
|
1 2 3 |
<input type="button" class="button needSelect" ng-disabled="cannnotPublishPdf" ng-click="publishPdf()" value="請求書発行"> $scope.cannnotPublishPdf = true → ボタン使用不可能 ボタンが押せなくなる $scope.cannnotPublishPdf = false → ボタン使用可能 |
Filter
読んで字のごとくfilter。特定の値の抽出などに向いている
