Angularjsでng-repeatによって取り出した値をテキストボックスのデフォルト値にしたい

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件

ベストアンサー

ng-initは不要で ng-model="article.name"として下さい。

html
1<html ng-app="myApp">
2<head>
3<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
4<script>
5  angular.module('myApp', []).controller('MyController', ['$scope', function($scope) {
6    $scope.articles = [
7      {title:'テラテイル', name: '質問', site: 'https://teratail.com'},
8    ];
9  }]);
10</script>
11
12</head>
13<body ng-controller="MyController">
14<form name="myForm" ng-submit="onsubmit()" novalidate>
15  <div ng-repeat="article in articles">
16    {{article.title}}<br>
17    <label for="name">名前：</label><br />
18    <input id="name" name="name" type="text" ng-model="article.name" required ng-minlength="2" ng-maxlength="10" />
19    <span ng-show="myForm.name.$error.required">
20      名前は必須です。</span>
21    <span ng-show="myForm.name.$error.minlength">
22      名前は2文字以上で入力してください。</span>
23    <span ng-show="myForm.name.$error.maxlength">
24      名前は10文字以内で入力してください。</span><br />
25    <label for="url">URL：</label><br />
26    <input id="url" name="site" type="url" ng-model="article.site" required />
27    <span ng-show="myForm.site.$error.required">
28      urlは必須です。</span>
29    <span ng-show="myForm.site.$error.url">
30      urlは正しい形式で入力してください。</span>
31  </div>
32    <input type="submit" value="申込"
33      ng-disabled="myForm.$invalid" />
34</form>
35</body>
36</html>

詳しくは以下のサンプルを確認して下さい。

投稿2017/01/05 14:04

総合スコア376

2017/01/05 14:15

できました！ありがとうございます！ちなみにどうやってこの答えを導けたのか（資料があるのか考え方があるのか等）、参考にしたいので教えていただきたいです。

pinpikokun

2017/01/05 14:20

今回は特別調べてはおらず知っていました。ただgoogleで「angularjs input ng-repeat」で検索すると上から２個めの検索結果が日本語ページなので見てみたところページ内を「<input」で検索したら同様の内容が載っていたので参考にしてみて下さい。 http://d.hatena.ne.jp/Kazzz/20130713/p1

xxx_aoi

2017/01/05 14:24

挙げていただいたサイト調べる中で確認してましたが、上手く応用できないと勝手に諦めてました。まだまだ調べる力が足らないと反省・・・。大変勉強になりました。本当にありがとうございます。

行動規範の内容に同意します