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;
});
Related
I have created a repeating partial view , now i want to delete the dynamically created.
This is my Main View my-custom-row-template is the partial that will be injected repeatedly onclick.
<section class="main_container">
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"/></th>
<th scope="col">Setup Responses</th>
<th>Add Condition</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td scope="col">
<input type="checkbox" ng-model="personalDetail.selected"/>
</td>
<td scope="col" class="col-xs-10">
<!--<div ng-repeat="condition_set in conditions" my-custom-row-template> </div>-->
<div ng-repeat="condition_set in conditions track by $index"
my-custom-row-template></div>
<!--<div my-custom-row-template></div>-->
</td>
</td>
<td scope="col">
<input type="button" value="Add Condition" ng-click="addCondition()"
class="btn btn-primary addnew"/>
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button"
class="btn btn-danger pull-right"
ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</span>
And this is my Partial view
<div class="col-xs-8 pull-left">
<div class="row form-group">
<select style="color: black;">
<option>Response Message</option>
<option>IF</option>
<option>Else</option>
</select>
<input type="text" class="form-control" ng-model="personalDetail.message"/>
<select style="color: black;">
<option>Step 2</option>
</select>
<select style="color: black;">
<option>Add Step</option>
</select>
<input type="button" value="Remove Condition" ng-click="remove_condition(my-custom-row-template)"
class="btn btn-danger"/>
</div>
</div>
This is how i am trying to get the current element and remove it, but i am getting a 0 instead. how to remove the currently clicked Partial ?
$scope.remove_condition = function (element) {
console.log(element);
};
Can any 1 tell me on how to remove the current partial view.
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>
I think i have some pretty big holes in my code, as when the modal is appearing, the content from the table (which when you click on a row produces the modal), is not populating the input boxes I have inside of the modal. I think I'm tackling the situation in the wrong way and some direction would be fantastic.
My JS:
var app = angular.module('peopleInformation', ['ngAnimate','ui.bootstrap']);
app.controller('myCtrl', function($scope, $http, $uibModal) {
$http.get("Assignment005.json").success(function(response){
$scope.myData = response.People;
});
$scope.modify = function(currentData){
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller:function($scope, $uibModalInstance, details){
$scope.FirstName = details.FirstName;
$scope.LastName = details.LastName;
$scope.Age = details.Age;
$scope.Nickname = details.Nickname;
$scope.update = function () {
$uibModalInstance.dismiss('cancel');
};
},
size: 'lg',
resolve: {
details: function() {
return currentData;
}
}
});
};
});
My modal:
<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" style="height:200px">
<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-model="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-model="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-model="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-model="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>
Main HTML in case it's needed:
<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="details in myData" data-ng-click="modify(details)">
<td>{{ details.FirstName }}</td>
<td>{{ details.LastName }}</td>
<td>{{ details.Age }}</td>
<td>{{ details.Nickname }}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info pull-right" data-ng-click="new()">Add
</button>
</div>
</div>
<div ng-include="myModalContent.html"></div>
</div>
</body>
Im very new to using Angular so if you could be overtly simple with me that would help to clarify things, although again, any help is appreciated.
Bellow is the angular modal instance controller
app.controller('ModalInstanceCtrl', function ($scope,
$uibModalInstance, item) {
$scope.customer = item;
$scope.yes = function () {
$uibModalInstance.close(); };
$scope.no = function () {
$uibModalInstance.dismiss('cancel');
};
});
bellow is the code for call angular modal
$scope.open = function (item) {
var modalInstance = $uibModal.open({
animation: true,
scope: $scope,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'md',
resolve: {
item: function () {
return item;
}
}
});
modalInstance.result.then(function (selectedItem) {
$log.info(selectedItem);
});
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
Bellow is code for template
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Re-calculate retail price</h3>
</div>
<div class="modal-body">
Margin percent of selected customer is <b>{{ customer.margin_percent }}</b> <br />
Do you want to recalculate the retail price?
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
<button class="btn btn-warning" type="button" ng-click="no()">No</button>
</div>
</script>
I was actually assigning the values in the wrong place I believe. I moved the:
$scope.FirstName = details.FirstName;
Outside of the var modalInstance variable, and they are now populating the input boxes. If this is messy or not standard then let me know as sometimes the right result is not always the right method. Thanks for those that tried to help, much appreciated.
In your HTML file you are passing different parameter to modify function, It should be equal to the parameter specified in ng-repeat directive.
So in this case this:
<tr data-ng-repeat="data in myData" data-ng-click="modify(details)">
will become:
<tr data-ng-repeat="details in myData" data-ng-click="modify(details)">
I have a list of brands:
<script type="text/ng-template" id="list.brands">
<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl">
<input type="text" ng-model="searchBox">
<thead>
<tr>
<th><tags:label text="brandid"/></th>
<th><tags:label text="name"/></th>
<th><tags:label text="isactive"/></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="actionresult{{$index + 1}}" ng-repeat="brand in brands | filter:searchBox">
<td>{{brand.brandid}}</td>
<td>{{brand.name}}</td>
<td>{{brand.isactive}}</td>
<td>
<a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open(brand.brandid)"><tags:label text="edit"/></a>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{brand.brandid}}" data-toggle="modal" ><tags:label text="delete"/></a>
</td>
</tr>
</tbody>
</table>
</script>
This list has brands line with 2 button; edit and delete. Edit button opens a modal of brand edit form:
<%#page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" ng-model="item.brandid" name="brandid"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" ng-model="item.name" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-model="item.isactive" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
In modal, save button saves modifications and closes the modal.
I want to reload the list after closing. How can I do it ? Controllers of list and modal is different.
How can I reload background of modal after close it ?
You can broadcast a method to communicate
try like this
In modal controller where close button is triggered
$rootScope.$broadcast('updateList');
If you wanna to pass data from modal
$rootScope.$broadcast('updateList',{data : 'passing'}); // pass object in {} if you wanna to pass anything
In data Controller
$scope.$on("updateList",function(){
// Post your code
});
If you passed data from modal
$scope.$on("updateList",function(e,a){
// Post your code
console.log(a.data);
});
If you are using angular UI $modal Service, then its pretty simple. The open() method of $modal service returns a promise on close and cancel of the modal.
Lets say
var myModal = $modal.open({
animation: true,
templateUrl: 'editForm.html',
backdrop: 'static',
keyboard: false,
scope: $scope
});
myModal.result.then(function(){
//Call function to reload the list
});
As you are calling $modal.open from list controller itself, you have got access to `promise' in list controller only and from there you can easily call your function to reload the list.
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.