Please guide me how do I push a new commodity object in the above loads object, by submiting a new form for commodity. The code I have tried is given below.
Note when I fill the form of commodity and submit to push in above json, it tells me undefined for loads.commodities.push
I have a complete sample JSON object (we call it loads), In which I have to push a commodity object. For new commodity I have an explicit form to add a new commodity details and push into existing loads object.
Loads Object:
{
"loadStops": [
{
"companyId": 148,
"companyCode": null,
"legalName": "Frontier WHSE",
"accessorialReason": null,
"commodities": [{
"id": 1,
"commodity": "Food",
"estWeight": 20000.00
}]
}
]
}
Display Table for viewing the loads data and Form to add New Commodity
<div ng-controller="FreightSaleCtrl">
<table>
<tr>
<th> Company Code </th> <th> Legal Name </th>
</tr>
<tr ng-repeat="theLoad in loads">
<td> {{theLoad.companyCode}} </td>
<td> {{theLoad.legalName}} </td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<th> Commodity </th> <th> EstWeight </th>
</tr>
<tr ng-repeat="cmdty in theLoad.commodities">
<td> cmdty.commodity </td>
<td> cmdty.estWeight </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div>
<form ng-controller="FreightSaleCtrl">
<input type="text" ng-model="commodityForm.commodity"/>
<input type="text" ng-model="commodityForm.estWeight"/>
<input type="submit" value="Add New Commodity"/>
</form>
</div>
My AngularJS controller:
(function() {
'use strict';
angular.module('bootstrapApp').controller('FreightSaleCtrl', FreightSaleCtrl);
function FreightSaleCtrl($scope, $location, $http, $compile) {
$scope.loads[0].commodities.push( $scope.commodityForm );
}
});
My new commodity form that opens by clicking on the link given in the commodity table:**
<div class="modal fade" id="commoditiesModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<form ng-controller="FreightSaleCtrl" id="commodity-form" role="form" novalidate>
<div class="modal-content">
<div class="modal-header modal-lg">
<h5 class="modal-title" id="exampleModalLabel">
Add Commodity
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</h5>
</div>
<div class="modal-body">
<div class="row"> <!-- row-1 -->
<div class="col-sm-3"> <!-- [0, 0] -->
<fieldset class="form-group">
<label id="fieldTitle">Commodity</label>
<input type="text" class="form-control" placeholder="" required data-error="Commodity required">
<div class="help-block with-errors"></div>
</fieldset>
</div>
<div class="col-sm-3"> <!-- [0, 1] -->
<fieldset class="form-group">
<label id="fieldTitle">Est. Weight</label>
<input type="text" class="form-control" placeholder="" required data-error="Est. weight required">
<div class="help-block with-errors"></div>
</fieldset>
</div>
</div>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-warning btn-sm" value="Reset" />
<button type="button" class="btn btn-danger btn-sm" ng-click="clear()"
data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default btn-sm">
<i class="fa fa-check-square-o"></i> Submit
</button>
</div>
</div>
</form>
</div>
</div>
The above form opens, when I click on this button: while the commodities displayed in the table:
The Commodity Form Modal itself
Every time the controller is specified, it will create new instance
of that controller So it should be kept inside one controller
theLoad.commodities cannot be accessed as it is ouside the
<tr ng-repeat="cmdty in theLoad.commodities">
<td> cmdty.commodity </td>
<td> cmdty.estWeight </td>
</tr>
One way to solve this is to have add input boxes inside the table - for each loads
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script>
(function() {
var app = angular.module("bootstrapApp", ['ui.bootstrap']);
app.component('modalComponent', {
templateUrl: 'myModalContent.html',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
controller: function($scope) {
var $ctrl = this;
$ctrl.$onInit = function() {
$scope.theLoad = $ctrl.resolve.currentLoad;
};
$scope.ok = function() {
$ctrl.close({
$value: $scope.theLoad
});
};
}
});
app.controller('FreightSaleCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.loads = [{
"companyId": 148,
"companyCode": 1234,
"legalName": "Frontier WHSE",
"accessorialReason": null,
"commodities": [{
"id": 1,
"commodity": "Food",
"estWeight": 20000.00
}, {
"id": 2,
"commodity": "Another",
"estWeight": 160000.00
}]
}, {
"companyId": 45,
"companyCode": 7879,
"legalName": "ASD froads",
"accessorialReason": null,
"commodities": [{
"id": 10,
"commodity": "Drinks",
"estWeight": 5600.00
}]
}];
$scope.openModal = function(load) {
var modalInstance = $uibModal.open({
animation: true,
component: 'modalComponent',
resolve: {
currentLoad: function() {
return load;
}
}
}).result.then(function(currentLoad) {
if (currentLoad) {
var maxValue = Math.max.apply(Math, currentLoad.commodities.map(function(o) {
return o.id;
}))
if (!maxValue) {
maxValue = 0;
}
currentLoad.newCommodity.id = maxValue + 1;
currentLoad.commodities.push(angular.copy(currentLoad.newCommodity));
currentLoad.newCommodity = undefined;
}
}, function() {
console.log('modal-component dismissed at: ' + new Date());
});
};
}]);
}());
</script>
<style></style>
</head>
<body ng-app="bootstrapApp">
<div ng-controller="FreightSaleCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Add Commodity !</h3>
</div>
<div class="modal-body" id="modal-body">
<form name="testForm">
<div class="form-group" ng-class="{ 'has-error' : testForm.commodity.$invalid && !testForm.commodity.$pristine }">
<label>Commodity</label>
<input type="text" name="commodity" ng-model="theLoad.newCommodity.commodity" placeholder="Commodity" ng-minlength="3" ng-maxlength="8" required/>
<p ng-show="testForm.commodity.$error.required && !testForm.commodity.$pristine" class="help-block">commodity is required.</p>
<p ng-show="testForm.commodity.$error.minlength" class="help-block">commodity is too short.</p>
<p ng-show="testForm.commodity.$error.maxlength" class="help-block">commodity is too long.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : testForm.estWeight.$invalid && !testForm.estWeight.$pristine }">
<label>estWeight</label>
<input type="text" name="estWeight" ng-model="theLoad.newCommodity.estWeight" placeholder="EST Weight" ng-minlength="3" ng-maxlength="8" required/>
<p ng-show="testForm.estWeight.$error.required && !testForm.estWeight.$pristine" class="help-block">estWeight is required.</p>
<p ng-show="testForm.estWeight.$error.minlength" class="help-block">estWeight is too short.</p>
<p ng-show="testForm.estWeight.$error.maxlength" class="help-block">estWeight is too long.</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<form name="commonForm">
<table class="table">
<tr>
<th> Company Code </th>
<th> Legal Name </th>
<th> Commodity </th>
<th> EstWeight </th>
</tr>
<tr ng-repeat="theLoad in loads">
<td> {{theLoad.companyCode}} </td>
<td> {{theLoad.legalName}} </td>
<td colspan="2">
<table class="table">
<tr ng-repeat="cmdty in theLoad.commodities track by cmdty.id">
<td>{{cmdty.id}} {{cmdty.commodity}} </td>
<td> {{cmdty.estWeight}} </td>
</tr>
<tr>
<td colspan="2">
<input class="pull-right" type="button" value="Add" ng-click="openModal(theLoad)" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Related
i only bind the drop-down related value, by clicking on edit button within table, its not working within drop-down
Here is my angularjs code
myapp = angular
.module('myapp', ["ui.router", 'ngAnimate', 'angular-loading-bar', 'ui-notification', 'smart-table', 'ui.bootstrap'])
.controller('DemoCtrl', function ($scope, $interval, Notification, cfpLoadingBar, $http) {
GetAll();
function GetAll() {
$http.get("/api/AddCatagories").then(function (response) {
$scope.cate = response.data
}, function () {
alert("Error")
})
}
$scope.subcateedit = function (Id) {
$http.get("/api/AddSubCatagories/" + Id).then(function (response) {
cfpLoadingBar.start();
$scope.SubCata = response.data
cfpLoadingBar.complete();
})
}
})
Html Table Code is here you can view all code..i only bind the drop-down related value, by clicking on edit button within table, its not working within drop-down
<table st-table="sub" st-safe-src="subcate" class="table table-striped">
<thead>
<tr>
<th style="color:black">Id</th>
<th style="color:black" width="100px">SubCatagoryName</th>
<th style="color:black" width="100px">CatagoryName</th>
<th style="color:black">Action</th>
</tr>
<tr>
<th colspan="5">
<label>Search..</label>
<input st-search placeholder="search" class="input-sm form-control" type="search" />
</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in sub">
<td style="color:black">{{row.Id}}</td>
<td style="color:black">{{row.SubCataName}}</td>
<td style="color:black">{{row.tblcatagory.CataName}}</td>
<td>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" ng-click="subcateedit(row.Id)">
<i class="glyphicon glyphicon-pencil" style="color:black">
</i>
</button>
<button type="button" class="btn btn-danger" ng-click="subcatedelete(row.Id)">
<i class="glyphicon glyphicon-trash" style="color:white">
</i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage"></div>
</td>
</tr>
</tfoot>
</table>
html form code:
<section class="panel">
<header class="panel-heading danger">
Add Catagory
</header>
<div class="panel-body" ng-controller="DemoCtrl">
<div ng-form="frm" name="loginForm"
class="pure-form pure-form-aligned" autocomplete="off">
<div class="position-center">
<div class="form-group" ng-class="{ 'has-error' :loginForm.ddl.$invalid && !loginForm.ddl.$pristine }">
<label>SubCatagory Name*</label>
<p>{{ SubCata.tblcatagory.CataName }}</p>
<select required name="ddl"
value="{{ SubCata.tblcatagory.CataName }}"
class="form-control"
ng-model="SubCata"
ng-options="item.CataName for item in cate">
</select>
<p ng-show="loginForm.ddl.$dirty && loginForm.ddl.$error.required"
class="help-block">Catagory Name is required</p>
</div>
<div class="form-group" ng-class="{ 'has-error' :loginForm.name.$invalid && !loginForm.name.$pristine }">
<label>SubCatagory Name*</label>
<input type="text" name="name" class="form-control" ng-model="SubCata.SubCataName"
ng-minlength="3" ng-maxlength="20" required>
<p ng-show="loginForm.name.$dirty && loginForm.name.$error.required"
class="help-block">SubCatagory Name is required</p>
<p ng-show="loginForm.name.$error.minlength" class="help-block">
SubCatagory Name is too short.
</p>
<p ng-show="loginForm.name.$error.maxlength" class="help-block">
SubCatagory Name is too long.
</p>
</div>
<button type="submit" class="btn btn-primary" ng-click="submitSubForm(loginForm.$valid , SubCata)"
ng-disabled="loginForm.$invalid">
Submit
</button>
</div>
</div></div>
</section>
UPDATE
now one issue is that ng-model="SubCata.tblcatagory.CataName" due to this i can't get the this {{SubCata.tblcatagory.Id}} id in the controller $scope
<select required name="ddl" class="form-control"
ng-model="SubCata.tblcatagory.Id"
ng-options="item.Id as item.CataName for item in cate">
</select>
i get id from this code
<label>SubCatagory Name*</label>
<p>{{ SubCata.tblcatagory.CataName }}</p>
<select required name="ddl"
value="{{ SubCata.tblcatagory.CataName }}"
class="form-control"
̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶S̶u̶b̶C̶a̶t̶a̶"̶
̶n̶g̶-̶o̶p̶t̶i̶o̶n̶s̶=̶"̶i̶t̶e̶m̶.̶C̶a̶t̶a̶N̶a̶m̶e̶ ̶f̶o̶r̶ ̶i̶t̶e̶m̶ ̶i̶n̶ ̶c̶a̶t̶e̶"̶
ng-model="SubCata.tblcatagory.CataName"
ng-options="item.CataName as item.CataName for item in cate">
</select>
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 trying to get the data from a row (once clicked) to fill a pop-up modal window with that row of data. And then you should be able to change the data and resubmit, updating the data in the table.
The below is the code for firstly my table, and then the modal.
The data that fills the table is retrieved through a $http get request, but when the data inside the modal is changed and the table is updated subsequently, the json file retrieved does not need to be updated.
I feel I've done a large amount of searching, but all the other answers have pointed me in different directions to what I seek, or I'm searching for the wrong thing.
I'm not seeking a full solution, but if anyone could guide me in the right direction that would be very helpful. Thanks in advance for any knowledge you can share on this.
To reiterate, this is what I'm struggling with:
"I'm trying to get the data from a row (once clicked) to fill a pop-up modal window with that row of data. And then you should be able to change the data and resubmit, updating the data in the table. "
<body>
<div data-ng-app="peopleInformation" data-ng-controller="myCtrl" class="jumbotron">
<div class="panel panel-default">
<div class="panel-heading">Essential Information</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Nickname</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="data in myData" data-ng-click="modify(data)">
<td>{{ data.FirstName }}</td>
<td>{{ data.LastName }}</td>
<td>{{ data.Age }}</td>
<td>{{ data.Nickname }}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info pull-right" data-ng-click="new()">Add
</button>
</div>
</div>
</div>
</body>
Here is my modal html:
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Your row of data</h4>
</div>
<div class="modal-body" name="modelData">
<form class="form-horizontal pull-left form-width" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="first">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="first" ng-bind="FirstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="last">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="last" ng-bind="LastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="age">Age:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="age" ng-bind="Age">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="nick">Nickname:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nick" ng-bind="Nickname">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success pull-right" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
Here is my JS so far too:
var app = angular.module('peopleInformation', ['ngAnimate','ui.bootstrap']);
app.controller('myCtrl', function($scope, $http, $uibModal) {
$http.get("xxxxxx.json").success(function(response){
$scope.myData = response.People;
});
$scope.modify = function(currentData){
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
details: function() {
return currentData;
}
}
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, details){
$scope.FirstName = details.FirstName;
$scope.LastName = details.LastName;
$scope.Age = details.Age;
$scope.Nickname = details.Nickname;
});
I am using angular to load meeting information into a table. When i try to add a new row to the table, the added row does not load the last bootstrap calendar because angular hasn't yet finished loading the row when i call a function to dynamically load the datepicker. How can i call load the datepicker after Angular has finished loading the new row?
Here's my code:
<div ng-controller="virtualmeetingdetails" id="virtualmeetingdetails">
<div class="row" id="proposedaddboards">
<div class="form-group required">
<label id="adboardnumber" class="control-label col-sm-4" for="spinner1">Proposed Number of Advisory Boards</label>
<div class="col-sm-4">
<div id="spinnerDiv1" class="input-group spinner">
<asp:TextBox id="spinner1" cssclass="form-control" value="0" runat="server" />
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button" ng-click="addUser()"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="tblVirtualMeeting">
<div class="form-group required">
<div class="col-sm-12" >
<table class="table table-bordered table-striped" jq-table>
<thead style="background-color:#cad4d9">
<tr>
<th>Proposed Date</th>
<th>Virtual Meeting</th>
<th>Location City</th>
<th>State</th>
<th>Country</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="meeting in meetings">
<td>
<div class="input-group input-append date" id="dtpicker{{$index}}" data-date-format="mm/dd/yyyy" style="width:150px;">
<span class="text-center" ng-show="editMode">{{meeting.proposedbegindate}}</span>
<input type="text" class="form-control col-sm-3" runat="server" ng-hide="editMode" ng-model="meeting.proposedbegindate" />
<span class="input-group-addon add-on" ng-hide="editMode">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</td>
<td>
<select ng-model="meeting.isvirtualmeeting" ng-hide="editMode"
ng-options="option.text for option in virtualmeetingoptions track by option.value" class="form-control">
</select>
<span class="text-center" ng-show="editMode">{{meeting.isvirtualmeeting.text}}</span>
</td>
<td>
<span class="text-center" ng-show="editMode">{{meeting.venuecity}}</span>
<input type="text" class="form-control" ng-hide="editMode" ng-model="meeting.venuecity" />
</td>
<td>
<select ng-model="meeting.venuestateID" ng-hide="editMode" ng-options="state.StateConst for state in statesList track by state.StateID" class="form-control"></select>
<span class="text-center" ng-show="editMode">{{meeting.venuestateID.StateConst}}</span>
</td>
<td>
<select ng-model="meeting.venuecountryid" ng-hide="editMode" ng-options="country.CountryName for country in countriesList track by country.CountryID" class="form-control"></select>
<span class="text-center" ng-show="editMode">{{meeting.venuecountryid.CountryConst}}</span>
</td>
<td style="width:170px">
<span class="glyphicon glyphicon-pencil" style="color: green; font-size: medium; cursor: pointer" ng-show="editMode" ng-click="editMode = false; editUser(participant)"></span>
<span class="glyphicon glyphicon-floppy-save" style="color: #337ab7; font-size: medium; cursor: pointer" ng-hide="editMode" ng-click="editMode = true;saveField(meeting, <%=_CurrentUserID %>);"></span>
<span class="glyphicon glyphicon-remove-circle" style="color: red;font-size:medium;cursor:pointer" ng-click="removeItem($index)"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Controller:
app.controller("virtualmeetingdetails", function ($scope, $http) {
$http.get("../Services/EngagementDataService.asmx/GetVirtualMeetings", { params: { 'mid': getParameterByName('mid')} })
.success(function (response) {
var j = response.length;
var i = 0;
if (response.length > 0) {
while (i < j) {
response[i].proposedbegindate = moment(response[i].proposedbegindate).format("MM/DD/YYYY");
i++
}
}
....more code goes here (removed)
$scope.addUser = function () {
$scope.editing = true;
var meetingcount;
if (typeof $scope.meetings === "undefined")
meetingcount = 0
else meetingcount = $scope.meetings.length;
$scope.inserted = {
engagementproposedinfoid: 0,
id: meetingcount + 1,
venuecity: '',
proposedbegindate: '',
venuestateid: 0,
venuecountryid: 1,
isvirtualmeeting: 0
};
$scope.meetings.push($scope.inserted);
rendercalendars(meetingcount);
};
});
Function to render datepicker:
function rendercalendars(rows) {
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var j = rows;
var i = 0;
while (i < j) {
$('#dtpicker' + i).datepicker({ autoclose: true, startDate: today });
i++
}
}
The issue happens when $scope.addUser gets called... it loads the table row before the rendercalendars function gets called so the datepickers don't get loaded.
Any help will be appreciated.
My guess would be something like this:
With this line you change your scope and on your next digest cycle your repeat will be "redone". So your html gets adjusted.
$scope.meetings.push($scope.inserted);
Then you call your render function and its all messed up if the digest hit before.
rendercalendars(meetingcount);
But that's just a guess of mine.
BTW there is an angular implementation for bootstrap components (ui-boostrap) then you don't have to do jQuery stuff.
Home this is some sort of help.
my ng-repeat is not updating after attempting to add an item to scope.
Here is my html:
<div class="col-lg-12">
<div class="panel-group" id="accordion">
<div class="panel panel-collapse panel-default" id="topPanel">
<div class="panel-heading" data-toggle="collapse" data-target="#top-action-panel-body">
<h4 class="panel-title">
Collapsible Group Item #1
</h4>
</div>
<div id="top-action-panel-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="ih_enterprise_api_stock_item_new form-horizontal form-stock-item-add" ng-submit="test()" ng-controller="InventoryAddCtrl" id="ihenterprise_logisticsbundle_stockItem">
<div class="form-group">
<label class="col-sm-4 control-label control-label required" for="ihenterprise_logisticsbundle_stockItem_name">Name</label>
<div class="col-sm-8">
<input type="text" id="ihenterprise_logisticsbundle_stockItem_name" name="ihenterprise_logisticsbundle_stockItem[name]" required="required" maxlength="255" ng-model="formData.name" class="form-control form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label control-label required" for="ihenterprise_logisticsbundle_stockItem_itemNo">Item no</label>
<div class="col-sm-8">
<input type="text" id="ihenterprise_logisticsbundle_stockItem_itemNo" name="ihenterprise_logisticsbundle_stockItem[itemNo]" required="required" maxlength="255" ng-model="formData.itemNo" class="form-control form-control">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<input type="submit" class="btn btn-success" value="Tilføj">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12" ng-controller="InventoryListCtrl">
<div class="panel panel-default" style="color: black; text-align: left">
<div class="panel-heading">
<h3>Lager liste</h3>
</div>
<div class="panel-body table-responsive">
<table class="table table-condensed table-expanding">
</table><table class="table table-condensed table-expanding">
<thead>
<tr>
<th> </th>
<th>Id</th>
<th>Created At</th>
<th>Navn</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="stockItem in stockItems" data-toggle="collapse" data-target="#stockItem_{{stockItem.id}} " class="accordion-toggle">
<td>
<button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
<td>{{stockItem.id}} </td>
<td>{{stockItem.created_at}} </td>
<td>{{stockItem.name}} </td>
</tr>
<tr ng-repeat-end="">
<td colspan="6" class="hiddenRow">
<div class="accordian-body collapse" id="package_{{stockItem.id}} ">
test
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Here is my code:
App.js
'use strict';
var app = angular.module('cmfApp', [
'ngRoute',
]);
angular.module('cmfApp.controllers', []);
InventoryRouting.js
angular.module('cmfApp').config(function($routeProvider){
$routeProvider.
when('/inventory', {
templateUrl: Routing.generate('ih_enterprise_user_dashboard_inventory'),
controller: 'InventoryListCtrl'
})
});
InventoryController.js
angular.module('cmfApp').controller('InventoryAddCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout){
$scope.submit = function() {
var postData = {
ihenterprise_logisticsbundle_stockItem: {
name: $scope.formData.name,
itemNo: $scope.formData.itemNo
}
}
$http({
method : 'POST',
url : Routing.generate('ih_enterprise_api_stock_item_new'),
data : $.param(postData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
// the code you want to run in the next digest
$scope.$apply(function(data){
$scope.stockItems = $scope.stockItems.concat(data);
});
//console.log($scope.stockItems);
}).error(function(error) {
console.log(error);
});
};
$scope.test = function() {
console.log("here");
$scope.stockItems.push({
id: 1000,
name: 'potato',
created_at: '1111'
});
console.log($scope.stockItems);
}
}]);
Ignore the HTTP request, i was thinking it was a HTTP related issue, but it seems much more fundamental, as i attempted to just insert a plain object on submit.
You seem to be instantiating the InventoryListCtrl twice: Once in the route definition, and again in the HTML template. As a result, when you update the stockItems array, it's not updating the same array used in the view.
Try removing the ng-controller="InventoryListCtrl" from the template.
This will make InventoryListCtrl be the controller for the entire HTML template (b/c of the route definition). InventoryAddCtrl is used inside the template and it will inherit the scope of InventoryListCtrl. So when you update $scope.stockItems from either controller, you'll now be updating the same object.