如何将表单保存到数组中并在angularjs中显示它们
嗨，首先我的英语不好。 即时通讯完全新在angularjs我想做一个窗体，然后将表单保存到一个数组，并在我的HTML显示数组。 我的问题是如何在数组中保存表单并始终保持它们，然后显示它们？如何将表单保存到数组中并在angularjs中显示它们
这里是我的jsfidle：http://jsfiddle.net/Lvc0u55v/12098/ 这里我的js代码：
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;
}
};
});，这是我的HTML表单和我的index.html：
<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>
您已经定义的路由，但没有出现在你的提琴模板。你还没有宣布整个应用程序。此外，你还没有注入范围。我已经删除了不需要的组件，并为您创建了一个重要的工具。
PLUNKER：Code Revision
HTML：
<html ng-app="myApp">
<head>
<script data-require="[email protected]" 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;
}
};
});
tnx老兄它非常有帮助：X –
在DIV卸下纳克控制器，
<div>
<ul>
<li ng-repeat="user in alluser"><a href="#">{{user.name}}</a></li>
</ul>
</div>
tnx但没有变化 –
为什么downvote here？ – Sajeetharan
更新的addItem函数像的下方。
$scope.addItem = function(user) {
$scope.alluser.push(user);
};
从第二格移除ng控制器。
<div>
<ul>
<li ng-repeat="user in alluser"><a href="#">{{user.name}}</a></li>
</ul>
</div>
有相当多的错误，我可以看到。你能为你的问题创建一个小提琴吗？这样就很容易调试。 –
@AlexRumbaNicked jsfiddle添加了bro –
您看到bro，您已经声明了具有名称的模板，但您尚未创建页面。控制器的使用也是多余的，还有更多。我会尝试在[plunker]中复制它（http://plnkr.co/）。但是，对于我来说，这对我来说太过分了15分：/ –