I'm having some issues on adding rows in a table using a button.
here is my HTML(note that i have 2 elements with the same custom directive, sure that 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 is my 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 is have the table that 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 that I have previous data that is being shown in the table, and I want to add some other, but when I do that, my $scope.insSupplies take the data I wrote in the inputs, but doesn't show that in the table
No errors are given, not even in console, and I'm trying to achieve it without any <a> tag
Here is a plunkr of my code.
EDIT: instead of downvoting, you could tell me how to improve my question
Your issue is that you have ng-controller twice. You only need it once on the <body>. Also, I changed your code so that you're passing in the value you want to use puntualAdd() function. It's better practice and overall makes more sense. Hope that 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
If your code is working fine, and your array "$scope.insSupplies" updated successfully everything should work fine.
Check this answer it might help you: How to add dynamic row to a table using angularjs
Related
I need when the addOrder button is pressed, the elements selected by the checkbox are added to the modal dialog table.
I think an option is to create an array, and through ng-repeat fill the other table, but I do not know how to do it.
Restaurant table
<!DOCTYPE html>
<div>
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>#Código
</th>
<th>Descripción
</th>
<th>Precio
</th>
<th>Cantidad
</th>
</tr>
</thead>
<tbody id="restaurant_table">
<tr ng-repeat="product in object">
<td>
<span ng-bind="product.idProducto"></span>
</td>
<td>
<span ng-bind="product.descripcionProducto"></span>
</td>
<td>
<span ng-bind="(product.precioProducto | currency:'₡')"></span>
</td>
<td>
<div class="input-group">
<input ng-model="product.cantidadProducto" type="text" class="form-control" min="0" value="1" />
</div>
</td>
<td>
<input type="checkbox" ng-checked="addItem(product);">
</td>
</tr>
</tbody>
</table>
<!--addOrder button-->
<button ng-click="addOrder();" type="button" class="btn btn-success" data-toggle="modal" data-target="#new-order-modal">Add</button>
</div>
addItem method (ng-checked).
I need to add multiple elements
$scope.elements = {};
$scope.addItem = function (product) {
$scope.elements.push({
id: product.idProducto,
descripcion: product.descProducto,
cantidad: product.cantidadProducto,
precio: product.precioProducto
});
addOrder method.
Fill table of modal dialog with elements {}. How can I do it?
$scope.addOrder = function () {
//code
};
Order Modal dialog table
<!DOCTYPE html>
<div id="new-order-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table>
<thead>
<tr>
<th>Id</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Costo</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in elements">
<td>{{item.id}}</td>
<td>{{item.descipcion}}</td>
<td>{{item.cantidad}}</td>
<td>{{item.precio| currency:"₡"}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
</div>
There is a working order add example for you.. Simply use that logic.
var app = angular.module("app", []);
function Product(id, descProducto, cantidadProducto, precioProducto)
{
this.idProducto = id;
this.descProducto = descProducto;
this.cantidadProducto = cantidadProducto;
this.precioProducto = precioProducto;
}
app.controller("ctrl", function($scope)
{
$scope.orderlist = [];
$scope.myProducts = [];
//adding random products
for(var i = 0; i < 10; i++ )
{
$scope.myProducts.push(new Product(i, "product"+i, "cantidal"+i, "precio"+i))
}
//adds checked items to orderlist
$scope.addOrder = function() {
this.orderlist = [];
for(var i = 0; i < this.myProducts.length; i++ )
{
if(this.myProducts[i].checked == true)
{
this.orderlist.push(angular.extend({},this.myProducts[i]));
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body ng-app="app" ng-controller="ctrl" >
<div>
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>#Código
</th>
<th>Descripción
</th>
<th>Precio
</th>
<th>Cantidad
</th>
</tr>
</thead>
<tbody id="restaurant_table">
<tr ng-repeat="product in myProducts track by $index">
<td>
<span ng-bind="product.idProducto"></span>
</td>
<td>
<span ng-bind="product.descripcionProducto"></span>
</td>
<td>
<span ng-bind="(product.precioProducto | currency:'₡')"></span>
</td>
<td>
<div class="input-group">
<input ng-model="product.cantidadProducto" type="text" class="form-control" min="0" value="1" />
</div>
</td>
<td>
<input type="checkbox" ng-model="product.checked">
</td>
</tr>
</tbody>
</table>
<!--addOrder button-->
<button ng-click="addOrder();" type="button" class="btn btn-success" data-toggle="modal" data-target="#new-order-modal">Add</button>
</div>
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table>
<thead>
<tr>
<th>Id</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Costo</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in orderlist track by $index">
<td>{{item.idProducto}}</td>
<td>{{item.descProducto}}</td>
<td>{{item.cantidadProducto}}</td>
<td>{{item.precioProducto| currency:"₡"}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
</div>
</body>
</html>
I m using angularjs to retrieve my data in my spring web app project. it is able to retrieve and display the data in all places i have passed it using {{ }} but in my form-action link it is not able to read the value passed . what is wrong with the syntax?
<div class="container text-center" ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="product in Data" >
<div class=col-lg-5>
<center>
<img src="<c:url value='/resource/image/{{product.name}}.jpg'/>" />
</center>
</div>
<div class=col-lg-7>
<table class="table table-striped">
<tr>
<h1>{{product.name}}</h1>
</tr>
<tr>
<th>Description</th>
<td>{{product.description}}</td>
</tr>
<tr>
<th>Category</th>
<td>{{product.category}}</td>
</tr>
<tr>
<th>Price</th>
<td>Rs.{{product.price}}</td>
</tr>
^
till here it displays the data using angular js
</table>
</div>
<form:form method="POST" modelAttribute="cart" action="${pageContext.request.contextPath}/user/addtocart?productId={{product.id}}">
^
here it doesnt read the data passed using angularjs
<sec:authorize access="hasRole('ROLE_USER')">
<input type="submit" class="btn btn-info btn-lg" value="Add to Cart" />
</sec:authorize>
</form:form>
Change your HTML to below way,because your ng-controller <div> tag ended before the form as the angular scope is restricted to that </div> tag itself your {{}} expression in action is not evaluated.
<div class="container text-center" ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="product in Data">
<div class=col-lg-5>
<center>
<img src="<c:url value='/resource/image/{{product.name}}.jpg'/>" />
</center>
</div>
<div class=col-lg-7>
<table class="table table-striped">
<tr>
<h1>{{product.name}}</h1>
</tr>
<tr>
<th>Description</th>
<td>{{product.description}}</td>
</tr>
<tr>
<th>Category</th>
<td>{{product.category}}</td>
</tr>
<tr>
<th>Price</th>
<td>Rs.{{product.price}}</td>
</tr>
</table>
<form:form method="POST" modelAttribute="cart" action="${pageContext.request.contextPath}/user/addtocart?productId={{product.id}}">
<sec:authorize access="hasRole('ROLE_USER')">
<input type="submit" class="btn btn-info btn-lg" value="Add to Cart" />
</sec:authorize>
</form:form>
</div>
</div>
</div>
i don't understand what my ng-show not working when i click on my button with ng-click...
thanks for help.
<div ng-show="showMe == 1">
<h5>Ajouter</h5>
<input type="texte">
</div>
<table>
<thead>
<tr>
<th>Numéro :</th>
<th>Type de Produit :</th>
</tr>
</thead>
<tbody ng-repeat="product in shopCtrl.tableProduct">
<tr>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td class="text-right">
<div>
<button ng-click="showMe = 1">Ajouter</button>
</div>
</td>
</tbody>
</table>
The answer of gtlambert is true. However if you have more than one level of ng-repeat or another directive that does the same thing you'll have trouble.
To not have any trouble use objects like this :
$scope.params = {showMe:0};// init in controller
<div ng-show="params.showMe == 1">
<button ng-click="params.showMe = 1">
This will always works whatever the number of ng-repeat/directive you use.
When you use ng-repeat this creates a new scope. To access the main controller scope from inside the ng-repeat you need to use $parent.
So, change your ng-click to $parent.showMe = 1 and this will fix the problem:
<button ng-click="$parent.showMe = 1">Ajouter</button>
Here you go. I have a working example. showMe becomes a member of your controller.
function ShopController() {
this.showMe = false;
this.tableProduct = [{
id: 1,
name: "Bar"
}];
}
angular.module('app', [])
.controller('ShopController', ShopController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ShopController as shopCtrl">
<div ng-show="shopCtrl.showMe">
<h5>Ajouter</h5>
<input type="texte">
</div>
<table>
<thead>
<tr>
<th>Numéro :</th>
<th>Type de Produit :</th>
</tr>
</thead>
<tbody ng-repeat="product in shopCtrl.tableProduct">
<tr>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td class="text-right">
<div>
<button ng-click="shopCtrl.showMe = true">Ajouter</button>
</div>
</td>
</tbody>
</table>
</div>
i'm developing for the first time with Angular JS and i created the following bootstrap modal in which there is a table with some content and inputs. Here is the code:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>User Menu</h4>
</div>
<div class="modal-body">
<div class="tablecontainer">
<table class="table table-striped table-hover table-condensed">
<colgroup>
<col class="col-md-1">
<col class="col-md-2">
<col class="col-md-2">
<col class="col-md-3">
<col class="col-md-2">
<col class="col-md-2">
</colgroup>
<thead>
<tr>
<th> </th>
<th>Firstname</th>
<th>Lastname</th>
<th>Address</th>
<th>Attachment</th>
<th>Group</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>
<input type="checkbox" value="" ng-model="ctrl.checked[$index]" ng-disabled="ctrl.fileupload!==undefined" ng-change="ctrl.checkBox($index)" />
</td>
<td>{{user.firstname}}</td>
<td>
<select class="form-control" ng-model="user.selectedAddress" ng-change="ctrl.checked[$index] = user.selectedAddress.destAddress" ng-options="o as o.destName for o in user.addresses"></select>
</td>
<td>{{user.selectedAddress.destAddress}}</td>
<td><input type = "text" class="customPart"
ng-model="ctrl.customText[$index]" /></td>
</tr>
</tbody>
</table>
</div>
[...]
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Close</button>
</div>
</div>
</div>
What is the angular way of clearing bootstrap modal to reset the user inputs?
You don't reset the UI to have a fresh model, you wan't to do the contrary. You need to reset the model, then your UI will be reset.
You can write a function that will reset your users array. For example:
function reset() {
for(var i = 0; i < users.length; i++) {
users[i].selectedAddress = null;
}
}
My addAct() funtion was working fine before, until I tried refactoring the index table. Now it isn't responding. Nothing is appearing in the console, for example. Maybe someone can help me figure out what's going on. I use the _form.html partial twice, but take a look at the row with id="newAct"
acts/templates/index.html
<div class="actions_body">
<div class="container">
<h2>Listing Actions</h2>
<div class="body">
<table class>
<thead>
<tr class="row">
<th class="col-md-2 active">
<label>Name</label>
</th>
<th class="col-md-5">Description</th>
<th class="col-md-2">Inspires</th>
<th colspan="2" class="col-md-2">Modify</th>
</tr>
</thead>
<tbody ng-repeat="act in acts">
<tr class="row">
<td class="col-md-2">{{act.name}}</td>
<td class="col-md-5">{{act.description}}</td>
<td class="col-md-2">{{act.inspires}}</td>
<td class="col-md-1"><button ng-click="updateActShow=true">Edit</button></td>
<td class="col-md-1"><button ng-click="deleteAct(act)">Delete</button>
<tr ng-show="updateActShow" ng-include="'acts/templates/_form.html'"></tr>
</tbody>
<tbody>
<tr class="row">
<button ng-click="newActShow=true">New Action</button>
<button ng-click="newActShow=false">Hide</button>
</tr>
<tr ng-show="newActShow" id="newAct" ng-include="'acts/templates/_form.html'"></tr>
</tbody>
</table>
</div>
</div>
</div>
acts/templates/_form.html
<div class="row" ng-controller="ActsController">
<form ng-submit="addAct()">
<td class="col-md-2">
<label for="newActName">Name</label>
<input type="text" ng-model="newAct.name" id="newActName" placeholder="Name" class="form-control">
</td>
<td class="col-md-4">
<label for="newActDescription">Description</label>
<input type="textarea" ng-model="newAct.description" id="newActDescription" placeholder="Description" class="form-control">
</td>
<td class="col-md-2">
<label for="newActInspires">Inspires</label>
<input type="number" ng-model="newAct.inspires" id="newActInspires" placeholder="Inspires" class="form-control">
</td>
<td class="col-md-2">
<input type="submit" value="+" class="btn btn-success">
</td>
</form>
</div>
acts/controllers/ActsController.js
controllers = angular.module('controllers');
controllers.controller('ActsController', [
'$scope',
'$routeParams',
'$location',
'$resource',
function($scope,$routeParams,$location,$resource) {
var Act = $resource('/acts/:actId', {
actId: "#id",
format: 'json'
}, {
'create': {
method: 'POST'
}
});
$scope.acts = Act.query();
$scope.addAct = function() {
act = Act.save($scope.newAct, function() {
$scope.acts.push(act);
$scope.newAct = '';
});
}
$scope.deleteAct = function(act) {
act.$delete();
$scope.acts.splice($scope.acts.indexOf(act), 1);
}
$scope.linkToShowAct = function(act) {
return $location.path('/acts/' + act.id);
}
}]);
You table is outside of ActsController scope. You need to put ng-controller="ActsController" on one of the elements surrounding table.