Question

我是javascript和angularjs的初学者，并且最近编码在表格中显示我的数组中的所有用户并让它们动态更新，因为我通过表单添加更多用户...但是当我运行我的代码时我得到的是“填写整个表格！”。我希望你们能告诉我我做错了什么（最重要的）以及我如何解决它。

谢谢！

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

我的Javascript / Angular：

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

};

});

Answer 1

由于你使用棱角分明，你不应该做你做的事情。

让我们从您的代码中取一个例子：FirstName：

<td><input type="text" id="formFirstName" ng-model="firstName" /></td>
<!-- Others like this -->

<td ng-bind="errorField"></td>
<!-- OR INSTEAD -->
<td>{{errorField}}</td>

现在你应该有一个控制器，对吗？因此，在您的控制器中，您可以这样做：

$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";
    }
}

这就是Angular的制作原因。

Answer 2

如果您使用角度使用2路数据绑定。添加ng-modal =＆＃34; fromFirstName＆＃34; ....等等你的输入。在你的控制器中设置局部变量，如var firstname = $ scope.formFirstName。由于它是实时的双向数据绑定，因此您可以更改视图和模型。当用户单击该按钮时，您可以检查空白。希望这有帮助

Answer 3

尝试使用下面的

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

Answer 4

当您使用AngularJS时，您应该使用ng-model指令将数据从视图传递到控制器，而不是使用Javascript手动执行。因此，您不应该在控制器中使用document.getElementById。

您必须在代码中进行以下更改：

在每种输入类型中添加ng-model指令。
使用form data传递object内的所有ng-model。

例如：

<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>

在这里，我创建了user对象，然后我们可以使用ng-click =“addUser（user）”传递整个对象。

工作演示：

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>

想要将用户添加到数组并使用angular和javascript在表中动态显示它

4 个答案: