ng-repeat内にあると、フォームが機能しないのはなぜですか?

mattsky

私はAngularJSを学び、簡単なタスク管理アプリケーションを作成しています。アプリケーションは外部のRESTサービスに接続しています。[タスクの追加]ボタンを使用して、アクティビティ(タスクのコンテナー)内のすべてのタスクをレンダリングしようとしましたが、フォームがループしていると、何も送信されません。

これが私のhtmlコードです:

<div id="task-group" ng-repeat="activity in activities | filter:query">
        <p>
        <h2>{{activity.activityName}}</h2></p>
        {{activity.activityId}}
        <form name="form" ng-submit="addTask()">
        <input type="text" ng-model="sendTaskName">
        <input type="hidden" name="{{activity.activityId}}" >
            <input type="submit" class="btn-primary" value="Add task">
        </form>
        <ul class="task-list">
            <li ng-repeat="task in activity.tasks">
                <p>{{task.taskName}}</p>
            </li>
        </ul>
    </div>

コントローラにタスク関数を追加します。

$scope.addTask = function(){
      $http({
          method: 'POST',
          url: 'http://localhost:8080/add-task',
          data: {taskName: $scope.sendTaskName, activityId: $scope.sendActivityId}
      }).success(function(){
          getActivities()
          $scope.sendTaskName = ''
      })
  }

編集:@Mickaelは私の問題を解決するのに役立ちます。解決策は彼の答えにあります。改めてありがとうございました!;)

ミカエル

使用してng-repeatおり、各反復内で、入力をng-modelディレクティブにバインドします

ここで何が起こるかというと、反復ごとに新しいスコープが作成されます。入力内で入力を開始すると、sendTaskName変数はコントローラーのスコープではなく、反復のスコープ内に作成されます

フォームが送信されると、コントローラーのスコープの変数が送信されます。そのため、何も送信しません。

問題を解決するには、addTaskメソッドにパラメーターを指定することをお勧めします

 <div id="task-group" ng-repeat="activity in activities | filter:query">
    <p>
    <h2>{{activity.activityName}}</h2></p>
    {{activity.activityId}}
    <form name="form" ng-submit="addTask(activity.activityId, sendTaskName); sendTaskName = '';">
        <input type="text" ng-model="sendTaskName">
        <input type="submit" class="btn-primary" value="Add task">
    </form>
    <ul class="task-list">
        <li ng-repeat="task in activity.tasks">
            <p>{{task.taskName}}</p>
        </li>
    </ul>
</div>

そして、コントローラーで次のパラメーターを使用します。

$scope.addTask = function(activityId, taskName) {
  $http({
      method: 'POST',
      url: 'http://localhost:8080/add-task',
      data: {taskName: taskName, activityId: activityId}
  }).success(function(){
      getActivities();
  })
}

次回は、plunkrを使用して、コードを修正できるようになります;)

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ng-repeatが機能しないのはなぜですか?

分類Dev

ボタンが別のフォームから呼び出された場合、Ng Repeatが機能しないのはなぜですか?

分類Dev

ng-showがng-repeatで機能するのに、ng-ifが機能しないのはなぜですか?

分類Dev

ng-repeatが正しく機能しないのはなぜですか?

分類Dev

ng-repeatの内側の角度のあるng-repeatがテーブルで機能しない

分類Dev

ng-blurを使用したときにng-clickが機能しないのはなぜですか?

分類Dev

ng-clickが機能しないのはなぜですか?

分類Dev

ng-showが機能しないのはなぜですか?

分類Dev

AngularJS:この委任されたng-repeatがトランスクルージョン内で機能しないのはなぜですか?

分類Dev

ng-mouseoverがng-ifで機能しないのはなぜですか

分類Dev

ng-mouseoverがng-ifで機能しないのはなぜですか

分類Dev

ケース1ではng-clickが機能しないのに、ケース3では機能するのはなぜですか?

分類Dev

$ scope.variabelに入ったときにng-clickが機能しないのはなぜですか?

分類Dev

ネストされたng-repeatが機能しないのはなぜですか

分類Dev

ng-repeatで使用すると、liでng-clickが機能しない

分類Dev

Railsフレームワーク内でAngularJSを使用する。「ng-repeat」は機能していますが、「ng-submit」は機能していません

分類Dev

ng-showがフォームで機能しない

分類Dev

なぜng-disabledが機能しないのですか?

分類Dev

なぜng-classが機能しないのですか?

分類Dev

event.keyCodeがng-keyupで機能しないのはなぜですか?

分類Dev

data-ng-file-selectが機能しないのはなぜですか?

分類Dev

最新のangularJSバージョンを使用しているにもかかわらずng-repeat-startが機能しない理由は何ですか?

分類Dev

Angular1フォームの検証がng-modelなしでは機能しない理由

分類Dev

ng-mouseenterとng-mouseleaveがng-repeatループ内で機能しない

分類Dev

ng-hideがカスタムディレクティブで機能しないのはなぜですか?

分類Dev

$ pristineまたは$ setDirty()をチェックするときに、なぜng-include内で未定義のフォームを作成するのですか?

分類Dev

ng-repeatとng-scrollbarが一緒に機能しない

分類Dev

ng-modelとng-repeat(フォーム内)を使用してデータをバインドするにはどうすればよいですか?

分類Dev

ng-クリックがng-repeat内の{{$ index}}で機能しない

Related 関連記事

  1. 1

    ng-repeatが機能しないのはなぜですか?

  2. 2

    ボタンが別のフォームから呼び出された場合、Ng Repeatが機能しないのはなぜですか?

  3. 3

    ng-showがng-repeatで機能するのに、ng-ifが機能しないのはなぜですか?

  4. 4

    ng-repeatが正しく機能しないのはなぜですか?

  5. 5

    ng-repeatの内側の角度のあるng-repeatがテーブルで機能しない

  6. 6

    ng-blurを使用したときにng-clickが機能しないのはなぜですか?

  7. 7

    ng-clickが機能しないのはなぜですか?

  8. 8

    ng-showが機能しないのはなぜですか?

  9. 9

    AngularJS:この委任されたng-repeatがトランスクルージョン内で機能しないのはなぜですか?

  10. 10

    ng-mouseoverがng-ifで機能しないのはなぜですか

  11. 11

    ng-mouseoverがng-ifで機能しないのはなぜですか

  12. 12

    ケース1ではng-clickが機能しないのに、ケース3では機能するのはなぜですか?

  13. 13

    $ scope.variabelに入ったときにng-clickが機能しないのはなぜですか?

  14. 14

    ネストされたng-repeatが機能しないのはなぜですか

  15. 15

    ng-repeatで使用すると、liでng-clickが機能しない

  16. 16

    Railsフレームワーク内でAngularJSを使用する。「ng-repeat」は機能していますが、「ng-submit」は機能していません

  17. 17

    ng-showがフォームで機能しない

  18. 18

    なぜng-disabledが機能しないのですか?

  19. 19

    なぜng-classが機能しないのですか?

  20. 20

    event.keyCodeがng-keyupで機能しないのはなぜですか?

  21. 21

    data-ng-file-selectが機能しないのはなぜですか?

  22. 22

    最新のangularJSバージョンを使用しているにもかかわらずng-repeat-startが機能しない理由は何ですか?

  23. 23

    Angular1フォームの検証がng-modelなしでは機能しない理由

  24. 24

    ng-mouseenterとng-mouseleaveがng-repeatループ内で機能しない

  25. 25

    ng-hideがカスタムディレクティブで機能しないのはなぜですか?

  26. 26

    $ pristineまたは$ setDirty()をチェックするときに、なぜng-include内で未定義のフォームを作成するのですか?

  27. 27

    ng-repeatとng-scrollbarが一緒に機能しない

  28. 28

    ng-modelとng-repeat(フォーム内)を使用してデータをバインドするにはどうすればよいですか?

  29. 29

    ng-クリックがng-repeat内の{{$ index}}で機能しない

ホットタグ

アーカイブ