配列にユーザーを追加し、角度とJavaScriptを使用してテーブルに動的に表示したい

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を/：

$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

を使用してみてくださいに役立ちます願っています。コントローラ内ではdocument.getElementByIdを決して使用しないでください。あなたのコードで行われたにしてい

これらの変更：各入力タイプで

1. アドオンNG-モデルディレクティブ。
2. を使用してobject内のすべてをform dataに渡します。

例：ここでは

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

は、私がuserオブジェクトを作成し、我々は、 "アドユーザー（利用者）" =をクリックしてNGを使用して、この全体のオブジェクトを渡すことができます。

の作業のデモ：

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>

Answer 2

あなたが角度を使用するので、あなたはあなたが何をやるべきではありません。

のは、あなたのコードのうち、exempleを見てみましょう：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 3

角度使用2方向データバインディングを使用している場合。 ng-modal = "fromFirstName" ....を入力に追加します。あなたのコントローラでは、var firstname = $ scope.formFirstNameのようなローカル変数を設定します。それはリアルタイムで2ウェイのデータバインディングであるため、ビューとモデルが変更されます。ユーザーがボタンをクリックすると、空の有無を確認できます。これは

Answer 4

あなたはAngularJSを使用しているとして、あなたが代わりにJavascriptを使用して手動でそれを行うのコントローラにビューからのデータを渡すためにNG-モデルディレクティブを使用する必要があります怒鳴る

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