Question

嗨，一开始我的英语不好。我是angularjs的新手我想做一个表单然后将表单保存到数组并在我的HTML中显示数组。我的问题是如何在数组中保存表单并始终保留它们，然后显示它们？

这是我的jsfidle：http://jsfiddle.net/Lvc0u55v/12098/ 这里是我的js代码：

＆＃13;

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm",
    })
    .when("/new", {
        templateUrl : "new.html",
        controller : "newController"
    })
    .when("/view", {
        templateUrl : "view.html",
        controller : "viewController"
    });
});
app.controller("newController", ['myfactory',

 function ($scope,myfactory) {
    $scope.master = {};

    $scope.update = function(user) {
      $scope.master = angular.copy(user);
    };

    $scope.reset = function(form) {
     if (form) {
        form.$setPristine();
        form.$setUntouched();
     }
     $scope.user = angular.copy($scope.master);
   };
 
   $scope.alluser = [{
    name: "",
    family: "",
    code: "",
    birth: "",
    father: "",
    explain: ""
   }];
    $scope.addItem = function(user) {
      $scope.alluser.name.push(user.name);
      $scope.alluser.family.push(user.family);
      $scope.alluser.code.push(user.code);
      $scope.alluser.birth.push(user.birth);
      $scope.alluser.father.push(user.father);
      $scope.alluser.explain.push(user.explain);
    };


}]);
app.controller("viewController", function ($scope) {
    $scope.msg = "I love Paris";
});

app.factory('myfactory', function() {
    return {
        array: function() {
            return $scope.alluser;
        }
    };
});

＆＃13;

这是我的html表单和我的index.html：

＆＃13;

<br /><br />
<div ng-app="myApp" ng-controller="newController">

<form>
name : <input type="text" ng-model="user.name" /><br />
family : <input type="text" ng-model="user.family" /><br />
code melli : <input type="text" ng-model="user.code" /><br />
birth: <input type="text" ng-model="user.birth" /><br />
father: <input type="text" ng-model="user.father" /><br />
explain : <input type="text" ng-model="user.explain" /><br />
<input type="submit" ng-click="addItem(master)" value="Save" />


    <ul>
        <li ng-show="user.name">{{user.name}}</li>
        <li ng-show="user.family">{{user.family}}</li>
        <li ng-show="user.code">{{user.code}}</li>
        <li ng-show="user.birth">{{user.birth}}</li>
        <li ng-show="user.father">{{user.father}}</li>
        <li ng-show="user.explain">{{user.explain}}</li>
    </ul>
    <div ng-controller="newController">
    <ul>
        <li ng-repeat="user in alluser"><a href="#">{{user.name}}</a></li>
    </ul>
</div>


</form>


</div>

＆＃13;

Answer 1

更新下面的addItem函数。

$scope.addItem = function(user) {
  $scope.alluser.push(user);
};

从第二个div中删除ng-controller。

<div>
    <ul>
        <li ng-repeat="user in alluser"><a href="#">{{user.name}}</a></li>
    </ul>
</div>

Answer 2

删除div上的ng-controller，

 <div>
    <ul>
        <li ng-repeat="user in alluser"><a href="#">{{user.name}}</a></li>
    </ul>
</div>

Answer 3

您已经定义了路线但是您的小提琴中没有模板。你还没有宣布整个应用程序。此外，您还没有注入范围。我删除了不需要的组件并为你创建了一个plunker。

PLUNKER： Code Revision

<强> HTML：

<html ng-app="myApp">

  <head>
   <script data-require="angular.js@1.3.0-beta.16" data-semver="1.3.0-beta.16" src="https://code.angularjs.org/1.3.0-beta.16/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
<body ng-controller="newController">

<form method="POST" name="user">
name : <input type="text" ng-model="user.name" /><br />
family : <input type="text" ng-model="user.family" /><br />
code melli : <input type="text" ng-model="user.code" /><br />
birth: <input type="text" ng-model="user.birth" /><br />
father: <input type="text" ng-model="user.father" /><br />
explain : <input type="text" ng-model="user.explain" /><br />
<input type="submit" ng-click="addItem(user)" value="Save" />

    <ul>
        <li ng-show="user.name">{{user.name}}</li>
        <li ng-show="user.family">{{user.family}}</li>
        <li ng-show="user.code">{{user.code}}</li>
        <li ng-show="user.birth">{{user.birth}}</li>
        <li ng-show="user.father">{{user.father}}</li>
        <li ng-show="user.explain">{{user.explain}}</li>
    </ul>
    <div >

        <p ng-repeat="x in alluser"> {{ x }} </p>

    </div>
</form>

</body>
</html>

<强> JS：

var app = angular.module("myApp", []);
app.controller("newController", ['$scope','myfactory',
 function ($scope,myfactory) {
    $scope.master = {};

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

    $scope.reset = function(form) {
     if (form) {
        form.$setPristine();
        form.$setUntouched();
     }
     $scope.user = angular.copy($scope.master);
   };

   $scope.alluser = [{
    name: "",
    family: "",
    code: "",
    birth: "",
    father: "",
    explain: ""
   }];
    $scope.addItem = function(user) {
      $scope.alluser.push(user);
    };


}]);

app.factory('myfactory', function() {
    return {
        array: function() {
            return $scope.alluser;
        }
    };
});

如何将表单保存到数组中并在angularjs中显示它们

3 个答案: