想要将用户添加到数组并使用angular和javascript在表中动态显示它
[英]Want to add users to an array and display it dynamically in a table using angular and javascript
问题描述
I'm a beginner at javascript and angularjs and was recently coding to display all the users in my array in a table and have them update dynamically as I add more users through a form... however when I run my code all I get is "Fill out the entire form!". 
我是javascript和angularjs的初学者，最近进行编码以在表中显示数组中的所有用户，并随着我通过表单添加更多用户而使它们动态更新...但是，当我运行代码时，我得到的是“填写整个表格！”。 I was hoping you guys could tell me what I am doing wrong (most importantly) and how I could fix it. 我希望你们能告诉我我做错了什么（最重要的是）以及如何解决。
Thanks! 谢谢！
My HTML: 我的HTML：
<table>
<tr>
<td colspan="5" class="align-center"><input type="text" placeholder="Search Users" class="search-users" ng-click="userSearch"/></td>
</tr>
<tr>
<td><input type="text" placeholder="First Name" class="add-user" id="formFirstName" /></td>
<td><input type="text" placeholder="Last Name" class="add-user" id="formLastName" /></td>
<td><input type="text" placeholder="Race" class="add-user" id="formRace" /> </td>
<td><input type="text" placeholder="Class" class="add-user" id="formClass" /></td>
<td><input type="text" placeholder="Faction" class="add-user" id="formFaction" /></td>
</tr>
<tr>
<td colspan="4" class="align-right error-field" id="errorField"></td>
<td colspan="1" class="align-right"><button type="button" class="add-user" ng-click="addUser()"/> Add </button></td>
</tr>
</table>
My Javascript/Angular: 我的Javascript /角度：
$scope.jsFirstName = document.getElementById('formFirstName').value;
$scope.jsLastName = document.getElementById('formLastName').value;
$scope.jsRace = document.getElementById('formRace').value;
$scope.jsClass = document.getElementById('formClass').value;
$scope.jsFaction = document.getElementById('formFaction').value;
$scope.jsID = users.length;
$scope.addUser = function () {
$scope.character = {};
$scope.character.id = $scope.jsID+1;
$scope.character.firstName = $scope.jsFirstName;
$scope.character.lastName = $scope.jsLastName;
$scope.character.faction = $scope.jsFaction;
$scope.character.class = $scope.jsClass;
$scope.character.race = $scope.jsRace;
if ($scope.jsFirstName.length === 0 || $scope.jsLastName.length === 0 || $scope.jsFaction.length === 0 || $scope.jsClass.length === 0 || $scope.jsRace.length === 0) {
document.getElementById('errorField').innerHTML = "Fill out the entire form!";
} else {
users.push(character);
}
};
});
4 个解决方案
解决方案1
0 2016-11-21 09:18:54
Since you use angular, you should not do what you do. 由于您使用的是角度，因此您不应该做自己想做的事情。
Let's take an exemple out of your code : FirstName : 让我们以您的代码为例： FirstName ：
<td><input type="text" id="formFirstName" ng-model="firstName" /></td>
<!-- Others like this -->
<td ng-bind="errorField"></td>
<!-- OR INSTEAD -->
<td>{{errorField}}</td>
Now you should have a controller, right ? 现在您应该有一个控制器，对吗？ So, in your controller, you can do this : 因此，在您的控制器中，您可以执行以下操作：
$scope.addUser = function() {
$scope.character = {};
$scope.character.firstName = $scope.firstName;
// Others like this
if($scope.firstName === "") { // More conditions
$scope.errorField="Please fill out the form";
}
}
This is why Angular has been made. 这就是制作Angular的原因。
解决方案2
0
If you are using angular use 2 way data binding. 如果使用角度，请使用2种方式进行数据绑定。 Add ng-modal="fromFirstName" .... Etc to your inputs . 将ng-modal =“ fromFirstName” ....等添加到您的输入中。 In your controller set up local variable like var firstname = $scope.formFirstName . 在您的控制器中设置局部变量，例如var firstname = $ scope.formFirstName。 As it's 2 way data binding in real time you views and models are changed. 由于是实时数据绑定的两种方式，因此您可以更改视图和模型。 When the user clicks the button you can check for emptiness. 当用户单击按钮时，您可以检查是否为空。 Hope this helps 希望这可以帮助
解决方案3
0 2016-11-21 09:27:07
Try using the bellow 尝试使用风箱
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myusersList", []);
app.controller("myCtrl", function($scope) {
$scope.users = [{fname:"sj",lname:"rao",class:"10"},{fname:"fvsdf",lname:"sdf",class:"1120"}];
$scope.addUser = function () {
var newUser = {};
newUser.fname=$scope.fname;
newUser.lname=$scope.lname;
newUser.class=$scope.class;
$scope.users.push(newUser);
}
});
</script>
<div ng-app="myusersList" ng-controller="myCtrl">
<ul>
<li ng-repeat="data in users">First Name : {{data.fname}} last Name : {{data.lname}} class : {{data.class}}</li>
</ul>
<input ng-model="fname">
<input ng-model="lname">
<input ng-model="class">
<button ng-click="addUser()">Add</button>
</div>
<p>Write in the input field to add users.</p>
</body>
</html>
解决方案4
0 已采纳 2016-11-21 10:09:15
As you are using AngularJS, you should use ng-model directive to pass the data from the view to controller instead of doing it manually using Javascript. 在使用AngularJS时，应使用ng-model指令将数据从视图传递到控制器，而不是使用Javascript手动进行。 So, you should never use document.getElementById within a controller. 因此，永远不要在控制器内使用document.getElementById 。
These changes you have to made in your code : 您必须在代码中进行以下更改：
- add ng-model directive in each input type. 在每种输入类型中添加ng-model指令。
- pass all the
form datainside anobjectusingng-model.使用ng-model在object内传递所有form data。
Ex : 例如：
<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>
Here, I created user object and then we can pass this whole object using ng-click="addUser(user)". 在这里，我创建了user对象，然后我们可以使用ng-click =“ addUser（user）”传递整个对象。
Working demo : 工作演示：
var app = angular.module('myApp',[]); app.controller('userController',function($scope) { $scope.usersData = []; $scope.addUser = function(user) { $scope.usersData.push(user); $scope.user = {}; } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="userController"> <table> <tr> <td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td> <td><input type="text" placeholder="Last Name" class="add-user" ng-model="user.formLastName" id="formLastName" /></td> <td><input type="text" placeholder="Race" class="add-user" ng-model="user.formRace" id="formRace" /> </td> <td><input type="text" placeholder="Class" class="add-user" ng-model="user.formClass" id="formClass" /></td> <td><input type="text" placeholder="Faction" class="add-user" ng-model="user.formFaction" id="formFaction" /></td> </tr> <tr> <td colspan="1" class="align-right"> <input type="button" class="add-user" ng-click="addUser(user)" value="Add User"/> </td> </tr> </table> <table> <tr> <td>First Name</td> <td>Last Name</td> <td>Race</td> <td>Class</td> <td>Faction</td> </tr> <tr ng-repeat="users in usersData"> <td>{{users.formFirstName}}</td> <td>{{users.formLastName}}</td> <td>{{users.formRace}}</td> <td>{{users.formClass}}</td> <td>{{users.formFaction}}</td> </tr> </table> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.