我试图在控制器中显示一个包含数组数据的表。 html有一些输入字段，点击提交后，我将输入字段中的值存储到数组中。然后我想在表格中显示值。我在ng-repeat上使用tr。
我希望表刷新并在数组中显示nwe数据。我是angularjs的新手，我认为由于ng-repeat，该表应自动显示新数据。我不确定。如果没有，我如何刷新表以显示新值。
但我认为问题不是这样，因为我在从输入字段推送之前向数组添加了一些值，但表仍然没有显示我的硬编码数组数据。
html（ng-repeat的表位于底部，ng-controller位于顶部）：
<div class="content rows" ng-controller="mainController" >
<div class="navigationClass col-md-2"> <!-- Navigation DIv-->
<ul class="navColor nav nav-pills nav-stacked">
<li ><a style="color:#ffffff" href="#">Masters</a></li>
<li ><a href="#" style="color:#ffffff">Transactions</a></li>
<li ><a style="color:#ffffff" href="#">Reports</a></li>
<li ><a style="color:#ffffff" href="#">Devices</a></li>
<li class="active"><a style="color:#ffffff" href="#">Employees</a></li>
<li ><a style="color:#ffffff" href="#">Dashboard</a></li>
<li ><a style="color:#ffffff" href="#">Vendors</a></li>
</ul>
</div>
<div class="middle col-md-9 borderClass">
<div class="middle-header borderClass" style="padding-top:15px;padding-bottom:5px;">
<p style="text-align:center;color:#ffffff;">
Employee Registeration
</p>
</div>
<div class="">
<div class="createNewEmployee row" style="padding:5px;">
<div class="emptyDiv col-md-1"></div>
<div class="col-md-4">
<label class="marginClass" for="empId">Enter Employee ID</label>
<input ng-model="employeeID" type="text" id="empId" class="form-control marginClass" placeholder="Employee ID" name="">
<label for="empName" class="marginClass">Enter Employee name</label>
<input ng-model="employeeName" type="text" class="form-control marginClass" placeholder="Employee name" name="">
<label for="empCard" class="marginClass">Enter employee card number</label>
<input ng-model="employeeCardNumber" type="text" id="empCard" class="form-control marginClass" placeholder="Card number" name="">
<label for="doj" class="marginClass">Select employee DOJ</label>
<input ng-model="scopeDoj" type="text" id="doj" class="form-control marginClass" placeholder="DOJ" name="">
</div>
<div class="emptyDiv col-md-1"></div>
<div class="col-md-4">
<div class="form-group">
<label class="marginClass" for="categoryDropdown">Select category</label>
<select ng-model="employeeCategory" class="form-control marginClass" id="categoryDropdown">
<option>Company employee</option>
<option>Contract workman</option>
<option>Manager</option>
</select>
</div>
<div class="form-group">
<label class="marginClass" for="departmentDropdown">Select deparment</label>
<select ng-model="employeeDepartment" class="form-control marginClass" id="departmentDropdown">
<option>Pulp mill(Operation)</option>
<option>Stock preparation</option>
<option>Paper machine(Operation)</option>
<option>Finishing house</option>
<option>Paper machine(O)-V</option>
<option>SFT Street-C</option>
</select>
</div>
<div class="[ form-group ]" style="margin:5px; margin-top:25px;">
<input type="checkbox"
ng-model="activeOrInactive"
ng-true-value="'active'"
ng-false-value="'inactive'"
name="fancy-checkbox-default" id="activeID" autocomplete="off" />
<div class="[ btn-group ]">
<label class="" for="activeID">
Employee active
</label>
</div>
</div>
<div class="[ form-group ]" style="margin:5px; margin-top:25px;">
<input type="checkbox"
ng-model = "fingerprintActiveOrInactive"
ng-true-value="'fingeractive'"
ng-false-value="'fingerinactive'"
style="" name="fancy-checkbox-default" id="fingerprintActiveID" autocomplete="off" />
<div class="[ btn-group ]">
<label class="" for="fingerprintActiveID">
Fingerprint bio status active
</label>
</div>
</div>
</div>
<div class="emptyDiv col-md-2">
</div>
</div>
<p style="text-align:center"><button ng-click="addNewEmployee()" class="btn btn-primary">Submit</button></p>
</div>
<form class="form-inline" style="margin:20px;">
<div class="searchEmployee">
<div class="form-group">
<p>
<label class="marginClass" for="searchBox">Search employee</label>
<input id="searchBox" type="text" class="form-control" placeholder="Type here to search" name="">
</p>
</div>
</div>
</form>
<div class = "theTable" style="border:1px thin #ff0000;">
<table class="table table-hover table-bordered" style="margin-bottom:1px;">
<thead>
<th>Employee ID</th>
<th>Employee name</th>
<th>Card number</th>
<th>DOJ</th>
<th>Department</th>
<th>Category</th>
<th>Status</th>
<th>Edit/Delete</th>
</thead>
<tbody>
<tr ng-repeat="employee in newEmployeeArray">
<td>{{employee.empid}}</td>
<td>{{employee.empname}}</td>
<td>{{employee.empcardnumber}}</td>
<td>{{employee.doj}}</td>
<td>{{employee.empcategory}}</td>
<td>{{employee.empdepartment}}</td>
<td>{{employee.empactive}}</td>
<td>{{employee.empfingerprint}}</td>
<td><a title="Edit" href="#" style="text-align:center;text-decoration:none">
<span class="glyphicon glyphicon-pencil"></span></a><a title="Edit" href="#">
<span title="Delete" class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
控制器：
var app = angular.module('itc-app', ['ngRoute']);
app.controller('mainController',function($scope,$route,$timeout){
$scope.employeeID="";
$scope.employeeName="";
$scope.employeeCardNumber="";
$scope.scopeDoj="";
$scope.employeeCategory="Company employee";
$scope.employeeDepartment="Pulp mill(Operation)";
$scope.activeOrInactive="inactive";
$scope.fingerprintActiveOrInactive = "fingerinactive";
// $scope.newEmployeeScopeArray;
var newEmployeeArray = [
{
empid:'a',empname:'a',empcardnumber:'',doj:'',
empcategory:'',empdepartment:'',empactive:'',
empdepartment:'',empactive:'',empfingerprint:'',
empty:''
}
];
$scope.addNewEmployee = function(){
$timeout(function(){
newEmployeeArray.push({
empid:$scope.employeeID,
empname:$scope.employeeName,
empcardnumber:$scope.employeeCardNumber,
doj:$scope.scopeDoj,
empcategory:$scope.employeeCategory,
empdepartment:$scope.employeeDepartment,
empactive:$scope.activeOrInactive,
empfingerprint:$scope.fingerprintActiveOrInactive,
empty:''
});
// $route.reload();
$scope.employeeID="";
$scope.employeeName="";
$scope.employeeCardNumber="";
$scope.scopeDoj="";
$scope.activeOrInactive="inactive";
$scope.fingerprintActiveOrInactive = "fingerinactive";
console.log(newEmployeeArray);
},1000);
}
})
答案 0 :(得分：0)
newEmplyoeeArray无法看到 $scope。你需要写
$scope.newEmployeeArray = [
{
empid:'a',empname:'a',empcardnumber:'',doj:'',
empcategory:'',empdepartment:'',empactive:'',
empdepartment:'',empactive:'',empfingerprint:'',
empty:''
}
];
而不是var newEmployeeArray。
答案 1 :(得分：0)
您忘记将newEmployeeArray添加到控制器$scope。当您这样做时，将新条目推送到该阵列将自动通过ng-repeat更新您的视图。
答案 2 :(得分：0)
两件事：
1）请使用$ scope for newEmployeeArray（$ scope.newEmployeearray = .....） 仅监视范围中的变量以进行更改。这就是更新阵列时视图未得到更新的原因
2）你不需要将newEmployeeArray.push ...放在$ timeout内。 $ timeout将等待循环完成，然后推送将再次改变范围并开始新的循环。这会妨碍表现。