How to store form data using angularjs?

Question

I've created a form with input fields which displays current values of a json file. Now i want when the user changes the values and submits the form i should be able to retrieve the new values and later write it to a json file. my present code is as follows

html file

<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);
});
}

and the json file is

{"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}]}

Thanks alot in advance!

callmekatootie · Accepted Answer · 2013-06-13 10:51:07Z

4

Instead of ...value="{{team.teamName}}" or ...value="{{team.w}}" use ...ng-model="team.teamName" and ...ng-model="team.w".

Also, I strongly suggest that you take the AngularJS phonecat tutorial that can be found here. It will explain in detail how to make a bare minimum AngularJS application and explains most of the concepts quite clearly.

answered Jun 13, 2013 at 10:51

callmekatootie

11.2k16 gold badges73 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2460658 Over a year ago

but the problem is i want to display the current value in the form fields and then if user still wants to make changes and submits the form it should be saved or for now stored in a variable

callmekatootie Over a year ago

Did you try the above approach? It will show the current values inside the input and when the user changes the value, $scope.teams will be automatically updated with the new value - that's the beauty of AngularJS. I think you should certainly try out the AngularJS tutorial - the link that I have provided - to understand what you can do with AngularJS and how it works.

Collectives™ on Stack Overflow

How to store form data using angularjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related