CODEWITHSUNDEEP
javascriptangularjsdata-binding
ECE
ECE

Reputation: 414

Data binding & adding to lists using angular js

I was able to get data binding working properly with angular.js with the following code.

What I'm trying to achieve:

Make my $scope.master an array, that when the user clicks "save", the value in the form field is appended or pushed to the $scope.master array.

What I've tried already:

I've tried making $scope.master an array, by declaring it as:

$scope.master = []

or

$scope.master = [{}]

or

$scope.master = {[]}

and I've also tried changing my "save method to the following:

    $scope.update = function(user) {
      $scope.master.push(angular.copy(user));
    };

and also

    $scope.update = function(user) {
      $scope.master = $scope.master.toString() + angular.copy(user).toString();
    };

But that doesn't seem to work either.

Current Code

Here is the working version of the code, where $scope.master gets a deep copy value of the form variable, and it doesn't add it to a list.

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example - example-example29-production</title>


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>



  </head>
  <body ng-app="formExample">
      <div ng-controller="ExampleController">
      <form novalidate class="simple-form">
        Name: <input type="text" ng-model="user.name" /><br />
        E-mail: <input type="email" ng-model="user.email" /><br />
        Gender: <input type="radio" ng-model="user.gender" value="male" />male
        <input type="radio" ng-model="user.gender" value="female" />female<br />
        <button ng-click="reset()">RESET</button>
        <button ng-click="update(user)">SAVE</button>
      </form>
      <pre>form = {{user | json}}</pre>
      <pre>master = {{master | json}}</pre>
    </div>

    <script>
      angular.module('formExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.master = {};

          $scope.update = function(user) {
            $scope.master = angular.copy(user);
          };

          $scope.reset = function() {
            $scope.user = angular.copy($scope.master);
          };

          $scope.reset();
        }]);
    </script>
  </body>
        </html>

I've really don't know how to make $scope.master a list that gets updated, every time i click "save" instead of having it be a deep copy.

Can someone please explain how to go about doing this?

Thank you for your time & help!

Upvotes: 0

Views: 947

Answers (2)

Guilherme Miranda
Guilherme Miranda

Reputation: 1082

Your $scope.master should be an array and your $scope.reset() function is wrong. Try:

<script>
    angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
        $scope.master = [];

        $scope.update = function(user) {
            $scope.master.push(angular.copy(user));
        };

        $scope.reset = function() {
            $scope.user = {};
        };

        $scope.reset();
    }]);
</script>

Upvotes: 1

Artyom Pranovich
Artyom Pranovich

Reputation: 6962

I don't understood why do you want to create $scope.master as array, because as I understood you want to store the last saved information about single user. For this purpose it is enough to create $scope.master as object.

But it up to you and it can be possible by this way.

function MyCtrl($scope) {
    $scope.master = [];

    $scope.update = function(user) {
        $scope.master.length = 0; //
        $scope.master.push(angular.copy(user));
    };

    $scope.reset = function() {
        $scope.user = $scope.master[0];
    };

    $scope.reset();
}

The last saved user's information will be appear in $scope.user after reset call.

This is JSfiddle with your example.

Upvotes: 0

Related Questions