使用angular js進行數據綁定和添加到列表

Question

通過以下代碼，我能夠使angular.js數據綁定正常工作。

我想要達到的目標：

將$scope.master一個array ，當用戶單擊“保存”時，表單字段中的值將appended或pushed送到$scope.master數組中。

我已經嘗試過的

我嘗試將$scope.master聲明為：

$scope.master = []

要么

$scope.master = [{}]

要么

$scope.master = {[]}

並且我還嘗試將“保存方法”更改為以下內容：

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

並且

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

但這似乎也不起作用。

當前代碼

這是代碼的工作版本，其中$scope.master獲得form變量的deep copy值，並且不會將其添加到列表中。

  <!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>

我真的不知道如何使$scope.master成為每次我單擊“保存”而不是進行深拷貝時都會更新的列表。

有人可以解釋如何執行此操作嗎？

感謝您的時間和幫助！

Answer 1

您的$ scope.master應該是一個數組，而您的$ scope.reset（）函數錯誤。 嘗試：

<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>

Answer 2

我不明白為什么要創建$scope.master作為數組，因為據我了解，您想存儲有關單個用戶的最后保存的信息。 為此，只需創建$scope.master作為對象就足夠了。

但這取決於您，通過這種方式可以實現。

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

重置調用后，最后保存的用戶信息將顯示在$scope.user 。

這是JSfiddle與您的示例。

使用angular js進行數據綁定和添加到列表

問題描述

2 個解決方案

解決方案1
1 已采納 2014-10-21 17:56:22

解決方案2
0 2014-10-21 17:54:44

使用angular js進行數據綁定和添加到列表

問題描述

2 個解決方案

解決方案1 1 已采納 2014-10-21 17:56:22

解決方案2 0 2014-10-21 17:54:44

解決方案1
1 已采納 2014-10-21 17:56:22

解決方案2
0 2014-10-21 17:54:44