Question

我有一些使用ng-repeat动态生成的texbox：

<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文件？

Answer 1

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

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

Live JSFiddle

如果你想看一个更复杂的例子让我知道，但我认为你可以得到这个想法。

Answer 2

您可以在每个输入上使用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请求，因为它看起来像您正在保存数据。

离子框架 - 如何提交包含动态内容的表单？

2 个答案: