Angularjs 如何使用按钮在表中添加行
我在使用按钮在表中添加行时遇到一些问题 这是我的HTML（请注意，我有两个元素具有相同的自定义指令，确保可以正常工作）： 下面是显示数据的表格：Angularjs 如何使用按钮在表中添加行,angularjs,html-table,Angularjs,Html Table,我在使用按钮在表中添加行时遇到一些问题 这是我的HTML（请注意，我有两个元素具有相同的自定义指令，确保可以正常工作）： 下面是显示数据的表格： <table class="table" ng-controller="SpotDispatcherController"> <thead> <tr>
<table class="table" ng-controller="SpotDispatcherController">
<thead>
<tr>
<th class="col-order">{{'POD' | translate}}</th>
<th class="col-order">{{'CUSTOMER_DENOMINATION'| translate}}</th>
<th class="col-order">{{'VAT_NUMBER'| translate}}</th>
<th class="col-order">{{'START_DATE'| translate}}</th>
<th class="col-order">{{'END_DATE'| translate}}</th>
<th class="col-order">{{'STATE'| translate}}</th>
<th class="colf-cmd"></th>
<th class="col-order">{{'ERROR_DESCRIPTION'| translate}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in insSupplies">
<td>{{row.supply_code}}</td>
<td>WIP</td>
<td>WIP</td>
<td>{{row.start_date}}</td>
<td>{{row.end_date}}</td>
<td>{{row.state}}</td>
<td class="colf-cmd">
<div class="form-group">
<div class="form-btn-container text-center">
<button type="button" class="btn btn-primary"
ng-click="deleteRecord()">X</button>
</div>
</div>
</td>
<td>{{row.state}}</td>
</tr>
</tbody>
</table>
{{'POD'| translate}
{{'CUSTOMER_-demination'| translate}}
{{'VAT_编号'|翻译}
{{'START_DATE'{124; translate}}
{{'END_DATE'{124; translate}}
{{'STATE'| translate}}
{{'ERROR_DESCRIPTION'| translate}}
{{row.supply_code}
在制品
在制品
{{row.start_date}
{{row.end_date}
{{row.state}}
X
{{row.state}}
$scope.insSupplies代码的情况下实现它
编辑：如果您的代码运行良好，并且您的数组“$scope.insSupplies”已成功更新，那么您可以告诉我如何改进我的问题，而不是向下投票
检查此答案可能会对您有所帮助：您的问题是您有两次ng控制器。您只需要在
上使用一次。另外，我更改了您的代码，以便您传入要使用puntualAdd（）函数的值。这是更好的练习，总体来说更有意义。希望有帮助
HTML:
工作代码：请在@WilliamHampshire addedDoesn中添加一个代码示例。如果您的代码看起来不是工作示例（正如您在html输出中看到的范围变量{{row.supply_Code}}），我对其进行了编辑，现在它没有更多编译错误。感谢您的响应，我的$scope.insSupplies数组将用我添加的内容进行更新（通过调试进行检查），但在某种程度上，视图不会在模型更改时更改…在plunker中，只需删除标记上的第二个“ng controller=”SpotDispatcherController“”指令，它就可以正常工作了
$scope.puntualAdd = function (){
if($scope.pod.pod == undefined || $scope.pod.pod == null){
$scope.errorPod=true;
$scope.errorMessage.push("field_required_pod");
}
if($scope.pod.startDate == undefined || $scope.pod.startDate == null){
$scope.errorStartDate=true;
$scope.errorMessage.push("field_required_startDate");
}
if($scope.pod.endDate == undefined || $scope.pod.endDate == null){
$scope.errorEndDate=true;
$scope.errorMessage.push("field_required_endDate");
}
if($scope.errorMessage.length==0){
$scope.puntualSupply={};
$scope.puntualSupply.supply_code=$scope.pod.pod;
$scope.puntualSupply.start_date= $scope.pod.startDate.toString();
$scope.puntualSupply.end_date= $scope.pod.endDate.toString();
$scope.puntualSupply.state= "NULL";
$scope.insSupplies.push($scope.puntualSupply);
}
}
<table class="table" ng-controller="SpotDispatcherController">
<thead>
<tr>
<th class="col-order">{{'POD' | translate}}</th>
<th class="col-order">{{'CUSTOMER_DENOMINATION'| translate}}</th>
<th class="col-order">{{'VAT_NUMBER'| translate}}</th>
<th class="col-order">{{'START_DATE'| translate}}</th>
<th class="col-order">{{'END_DATE'| translate}}</th>
<th class="col-order">{{'STATE'| translate}}</th>
<th class="colf-cmd"></th>
<th class="col-order">{{'ERROR_DESCRIPTION'| translate}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in insSupplies">
<td>{{row.supply_code}}</td>
<td>WIP</td>
<td>WIP</td>
<td>{{row.start_date}}</td>
<td>{{row.end_date}}</td>
<td>{{row.state}}</td>
<td class="colf-cmd">
<div class="form-group">
<div class="form-btn-container text-center">
<button type="button" class="btn btn-primary"
ng-click="deleteRecord()">X</button>
</div>
</div>
</td>
<td>{{row.state}}</td>
</tr>
</tbody>
</table>
<body ng-controller="SpotDispatcherController">
<ng-form>
<div class="form-inline">
<div class="row">
<div class="form-group">
<label title="POD" for="dispatcherPod">POD</label>
<input class="form-control" id="dispatcherPod" ng-model="pod.pod">
</div>
</div>
</div>
<button type="button" class="btn btn-primary pull-right" ng-click="puntualAdd(pod.pod)">PUNTUAL_ADD</button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="col-order">POD</th>
<th class="col-order">DENOMINATION</th>
<th class="col-order">VAT_NUMBER</th>
<th class="col-order">STATE</th>
<th class="colf-cmd"></th>
<th class="col-order">ERROR_DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in insSupplies">
<td>{{row.supply_code}}</td>
<td>WIP</td>
<td>WIP</td>
<td>{{row.state}}</td>
<td class="colf-cmd">
<div class="form-group">
<div class="form-btn-container text-center">
<button type="button" class="btn btn-primary" ng-click="deleteRecord()">X</button>
</div>
</div>
</td>
<td>{{row.state}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-form>
</body>
var app = angular.module('plunker', []);
app.controller('SpotDispatcherController', ['$scope',
function($scope) {
$scope.insSupplies = [];
$scope.pod = [];
$scope.puntualAdd = function(input) {
$scope.insSupplies.push({
id: null,
dispatch_id:null,
supply_code: input,
magnitude:null,
stat: "NULL",
state_desc: null,
start_date_val: null,
end_date_val: null,
ext_date: null,
aut_mod: null,
date_mod: null
});
};
}
]);