Ionic Framework-如何提交具有动态内容的表单

Ionic Framework - How can I submit a form with dynamic content?

本文关键字：动态 表单 Framework- 何提交 提交 Ionic      更新时间：2023-09-26

我有一些文本框，它们是通过使用ng repeat:动态生成的

<ion-content>
    <div class="matchList">
        <div class="matchListItem" ng-repeat="match in matchData">
            <div class="home-team-name">
                {{match.Team1.TeamName}}
            </div>
            <div class="tip-input">
                <input type="text" style="border:1px solid #CCC; width:100%; height:23px; padding-left:4px;" />
            </div>
            <div class="tip-center">
                <center>:</center>
            </div>
            <div class="tip-input">
                <input type="text" style="border:1px solid #CCC; width:100%; height:23px; padding-left:4px;" />
            </div>
            <div class="guest-team-name">
                {{match.Team2.TeamName}}
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="save-button">
        <button class="button button-block button-positive" ng-click="save()">
            Save
        </button>
    </div>
</ion-content>

这是足球联赛的小费游戏。因此，比赛日的每一场比赛都有两个文本框。我想把文本框的值发送到一个php文件中。我知道我可以做这样的事情：

$scope.save = function () {
    $http.get('http://localhost/saveTips.php?data=' + data).then(function (response) {
        $scope.doesItWork = response.data;
    })
}

但是，我如何将每个文本框的值保存在数据变量中，以将其发送到php文件？

您需要将模型分配到字段，从而允许访问控制器上的数据。你可以做一些简单的事情，比如把数据存储在一个数组上（一个新的数组，甚至是你重复ng的同一个数组，如这个简单的例子所示。）

<input type="text" ng-repeat="input in inputs" ng-model="input.model" />

实时JSFiddle

如果你想看一个更复杂的例子，请告诉我，但我认为你可以理解。

您将在每个输入上使用ng-model，然后将数组发布到服务器。在服务器上，您必须接受一个match对象数组。

假设您的match对象是

match:{
  Team1:{
    TeamName:'',
    InputValue:''
  },
  Team2:{
    TeamName:'',
    InputValue:''
  }
}

那么您的输入将具有ng-model="match.Team1.InputValue"（或Team2）

此外，您应该使用$http.post('http://localhost/saveTips.php', data)并更改php文件以接受POST请求，因为它看起来像是在保存数据。

相关文章：