angularjs - How to add rows in a table with a button -
i'm having issues on adding rows in table using button.
here html(note have 2 elements same custom directive, sure works):
<input class="form-control" id="dispatcherpod" ng-model="pod.pod"> <exa-datepicker model="pod.startdate" required="true"disabled="true" min-mode="day"id="podstartdate" format="yyyy-mm-dd" readonlydata="false"></exa-datepicker> <exa-datepicker model="pod.enddate" required="true" disabled="true" min-mode="day" id="podenddate" format="yyyy-mm-dd" readonlydata="false"></exa-datepicker> <button type="button" class="btn btn-primary pull-right" ng-click="puntualadd()">{{'puntual_add' | translate}}</button> here js:
$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); } } and here have table shows data :
<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> note have previous data being shown in table, , want add other, when that, $scope.inssupplies take data wrote in inputs, doesn't show in table
no errors given, not in console, , i'm trying achieve without <a> tag
here plunkr of code.
edit: instead of downvoting, tell me how improve question
your issue have ng-controller twice. need once on <body>. also, changed code you're passing in value want use puntualadd() function. it's better practice , overall makes more sense. hope helps!
html:
<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> javascript:
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 }); }; } ]); working code: plunkr
Comments
Post a Comment