AngularJSで、フォームのセレクトを扱います。
※ラベルと値をオブジェクトの配列からセットします。
【手順】
1.『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『index.html』を以下の様に入力。
<!doctype html> <html ng-app="mainModule"> <head> <script src="angular.min.js"></script> <script> var mainModule = angular.module('mainModule',[]); var sampleController = function($scope) { $scope.colorArray = [ {name: '赤', english: 'red'}, {name: '青', english: 'blue'}, {name: '黄', english: 'yellow'} ]; }; mainModule.controller('sampleController', ['$scope', sampleController]); </script> </head> <body ng-controller="sampleController"> <select ng-model="inputValue" ng-options="color.english as color.name for color in colorArray"> <option value="">(未選択)</option> </select> <br /> 選択された値:{{inputValue}} </body> </html>
4.ダウンロードした『angular.min.js』と『index.html』を同一ディレクトリに配置します。
5.『index.html』をブラウザで開きます。
6.以下の様に表示されれば成功です。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。