Ng-repeat submit form with generated fields

谁说我不能喝 提交于 2019-12-13 02:09:06

问题


I have this issue, where i have a ng-repeat where i add some input fields and i want to submit the value of these inputs to the generated form - dosn't work with ng-model, but can i get by input name inside the form tag.

<li ng-repeat="group in tournament.groups">
    <form novalidate ng-submit="tournament.submit(group.team1, group.team2)">
        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x">
        </span> - <span>
            <input type="number" name="team2" placeholder="x">
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
    </form>
</li>

回答1:


You should bind the input using ng-model & name attribute of form is missing which because of which your ng-submit is not getting fire.

When you add name attribute to your form suppose name="team" at that time angular does create a new variable inside scope & add all the form related information about the validity of form & the information of each field.

Markup

<li ng-repeat="group in tournament.groups">
    <form name="team" novalidate ng-submit="tournament.submit(group.team1, group.team2)">
        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x" ng-model="group.team1"/>
        </span> - <span>
            <input type="number" name="team2" placeholder="x" ng-model="group.team2"/>
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
    </form>
</li>



回答2:


Use ng-model:

View:

<li ng-repeat="group in tournament.groups">
    <form novalidate ng-submit="submit()">
        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x" ng-model="group.team1.name">
        </span> - <span>
            <input type="number" name="team2" placeholder="x" ng-model="group.team2.name">
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
    </form>
</li>

in controller:

$scope.submit = function(){
   console.log($scope.group.team1.name);
   console.log($scope.group.team2.name);
};

You will get your value. Try once my code.




回答3:


In the approach you have used you will be having multiple forms. I would suggest you to have only one form and iterate inside the form as follows :

<form name="team" novalidate ng-submit="tournament.submit(group.team1, group.team2)">
    <li ng-repeat="group in tournament.groups">

        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x" ng-model="team1"/>
        </span> - <span>
            <input type="number" name="team2" placeholder="x" ng-model="team2"/>
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
   </li>
</form>

And have the ng-model updated for each and every group accordingly using '$index' (as ng-model="team{{$index}}")

I guess this should do the trick.



来源:https://stackoverflow.com/questions/31089140/ng-repeat-submit-form-with-generated-fields

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!