Angularjsでバリデーション機能を使用している入力フォームを作成しています。ng-repeatによって取り出した値をテキストボックスのデフォルト値にしたいのですができません。
index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> <script src="repeat.js"></script> </head> <body ng-controller="MyController"> <form name="myForm" ng-submit="onsubmit()" novalidate> <div ng-repeat="article in articles"> {{article.title}}<br> <label for="name">名前:</label><br /> <input id="name" name="name" type="text" ng-model="name" ng-init="name='{{article.name}}'" required ng-minlength="2" ng-maxlength="10" /> <span ng-show="myForm.name.$error.required"> 名前は必須です。</span> <span ng-show="myForm.name.$error.minlength"> 名前は2文字以上で入力してください。</span> <span ng-show="myForm.name.$error.maxlength"> 名前は10文字以内で入力してください。</span><br /> <label for="url">URL:</label><br /> <input id="url" name="site" type="url" ng-model="site" ng-init="site='{{article.site}}'" required /> <span ng-show="myForm.site.$error.required"> urlは必須です。</span> <span ng-show="myForm.site.$error.url"> urlは正しい形式で入力してください。</span> </div> <input type="submit" value="申込" ng-disabled="myForm.$invalid" /> </form> </body> </html>
repeat.js angular.module('myApp', []) .controller('MyController', ['$scope', function($scope) { $scope.articles = [ { title:'テラテイル', name: '質問', site: 'https://teratail.com' }, ]; }]); ※$httpによってデータを取得することもある。
ng-repeatから取り出した値のため、コントローラーからスコープオブジェクトのプロパティを設定してデフォルト値にする方法ができませんでした。
そこでng-initをinput内に記載する方法を行ったのですが、テキストボックス内には{{article.site}}というようにそのまま表示されてしまいます。
ちなみにinput内にValue="{{article.name}}"と書く場合も当然上手くいきませんでした。
お手数をおかけして申し訳ございませんが、ご教示願います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/05 14:15
2017/01/05 14:20
2017/01/05 14:24