如何使用angularjs存储表单数据?

时间:2013-06-13 09:40:09

标签: json angularjs

我创建了一个带有输入字段的表单,显示了json文件的当前值。现在我想当用户更改值并提交表单时,我应该能够检索新值,然后将其写入json文件。 我现在的代码如下

html文件

<html ng-app>
<head>
  <script src="angular.min.js"></script>
  <script src="angularjs.js"></script>
</head>
<body ng-controller="teamsController">
  <form >
    <table>
        <thead>
            <th>TeamName</th><th>Wins</th>
        </thead>
    <tr ng-repeat="team in teams"><td><input type="text" value="{{team.teamName}}"></td>
    <td><input type="text" value="{{team.w}}"></td></tr>
    </table>
    <input type="submit" value="Save new values" ng-click="savedata()">
  </form>
</body>
</html>

js file

var teamsController = function ($scope,$http) {
$http.get("teams.json").success(function(data)
{
$scope.teams=data.teams;
console.log(data);
console.log($scope.teams);
});
}

并且json文件是

{"leagueName":"American League", "abbr":"AL", "teams":[
    {"teamName":"Tampa Bay", "w":96, "l":66},
    {"teamName":"NY Yankees", "w":95, "l":67},
    {"teamName":"Boston", "w":89, "l":73},
    {"teamName":"Toronto", "w":85, "l":77},
    {"teamName":"Baltimore", "w":66, "l":96},
    {"teamName":"Minnesota", "w":94, "l":68},
    {"teamName":"Chicago White Sox", "w":88, "l":74},
    {"teamName":"Detroit", "w":81, "l":81},
    {"teamName":"Cleveland", "w":69, "l":93},
    {"teamName":"Kansas City", "w":67, "l":95},
    {"teamName":"Texas", "w":90, "l":72},
    {"teamName":"Oakland", "w":91, "l":81},
    {"teamName":"LA Angels", "w":80, "l":82},
    {"teamName":"Seattle", "w":61, "l":101}]}

提前多多谢谢!

1 个答案:

答案 0 :(得分:4)

而不是...value="{{team.teamName}}"...value="{{team.w}}"使用...ng-model="team.teamName"...ng-model="team.w"

此外,我强烈建议您参加可以找到的here AngularJS phonecat教程。它将详细解释如何制作一个最小的AngularJS应用程序,并非常清楚地解释大多数概念。