How to switch from a bootstrap modal to a angular modal - angularjs

I am switching from the bootstrap modals to Ekathuwa Angular Modals. I have a table that when I click on the "Number" a modal opens with the input fields populated with the selected objects properties. I have it working with the bootstrap modals but i am lost on how to do it the angular way.
plunkr
controller :
//editChangeOrderModal
$scope.currentItem = null;
$scope.editChangeOrderModal = function (model) {
$ekathuwa.modal({
id: 'editChangeOrderModal',
scope: $scope.currentItem = model,
templateURL: "modal-template.html"
});
};
view :
<table class=" table table-bordred table-striped table-hover">
<tr>
<th style="font-weight: bold;">Number</th>
<th style="font-weight: bold;">Date</th>
<th style="font-weight: bold;">Name</th>
</tr>
<tr ng-repeat="job in ChangeOrders" class=" pointer">
<td ng-click="editChangeOrderModal(job)">{{job.ChangeOrderNumber}}</td>
<td>{{job.ChangeOrderDate}}</td>
<td>{{job.ChangeOrderName}}</td>
</tr>
</table>
<div class="col-xs-12">
<div class="inline-fields" style="margin-top:30px">
<label>Name:</label>
<input style="width:150px" ng-model="currentItem.ChangeOrderName" type="text">
</div>
<div class="inline-fields">
<label>Number:</label>
<input style="width:150px" ng-model="currentItem.ChangeOrderNumber" type="text">
</div>
<div class="inline-fields">
<label>Date:</label>
<input style="width:150px" ng-model="currentItem.ChangeOrderDate" type="date">
</div>
<br/>
<input style="float:right"
ng-click="printEditChangeOrderModal(currentItem)"
type="button"
value="Print"
go-click="#"/>
<input style="float:right"
ng-click="updateChangeOrder(currentItem)"
type="button"
value="Save"
go-click="#"/>
<input style="float:right"
type="button"
data-dismiss="modal"
value="Exit"
go-click="#"/>
</div>

I think the problem is with this line,
scope: $scope.currentItem = model,
I changed to this
$scope.currentItem = null;
$scope.editChangeOrderModal = function(model) {
$scope.currentItem = model;
console.log(model);
$ekathuwa.modal({
id: "editChangeOrderModal",
scope:$scope,
templateURL: "modal-template.html"
});
}
I forked your [plunker]: http://plnkr.co/edit/OTJA6n7WADN5bprZaQco?p=info

Related

using Angularjs How to bind dropdown value control from the table by clicking on edit button?

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>

Assign values to Angular-ui modal

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)">

Angular table last added row not loading bootstrap calendar

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.

Is it possible to fire ng-click of a button element from a button in another controller?

I want to use angular modal for CRUD operation, so for firing the modal we have button by id modalFire in ng-controller="ModalDemoCtrl" , this is my modal:
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">....</h3>
</div>
<div class="modal-body">
<form id="productForm" novalidate>
<div>
<label for="ProductName"> productName :</label>
<input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />
</div>
<div style="margin:10px">
<label for="Price">price :</label>
<input type="text" name="Price" id="Price" ng-model="model.Price" />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">save</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" id="modalFire" class="btn btn-default modalBtn" ng-click="open()">UpdateProduct</button>
</div>
and it's controller:
App.controller('ModalDemoCtrl', function ($scope, $modal) {
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
});
App.controller('ModalInstanceCtrl', function ($scope, $modalInstance, $http) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
and i have a grid that shows ProductList :
<div ng-controller="ProductController" ng-init="GetAllProducts()">
<div class="row" style="margin-top:90px" ng-show="!ShowGrid">
<article class="widget">
<header class="widget__header">
<div class="widget__title">
<i class="pe-7s-menu"></i><h3>ProductList</h3>
</div>
<div class="widget__config">
<i class="pe-7f-refresh"></i>
<i class="pe-7s-close"></i>
</div>
</header>
<div class="widget__content table-responsive">
<table class="table table-striped media-table">
<thead style="background-color:rgba(33, 25, 36,0.1)">
<tr>
<th style="width:30%">price</th>
<th style="width:30%">productName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in Products">
<td>{{product.Price}}</td>
<td>{{product.ProductName}}</td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
</div>
so, i want a way to add a button or <a> element for each row in grid that can fire the modal, is there any way?
Unless I misunderstand your question, why not just add the button to your ng-repeat in your table. For example:
<table class="table table-striped media-table">
<thead style="background-color:rgba(33, 25, 36,0.1)">
<tr>
<th>Price</th>
<th>ProductName</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in Products">
<td>{{product.Price}}</td>
<td>{{product.ProductName}}</td>
<td><button ng-click="loadItem(product)>Edit</button></td>
</tr>
</tbody>
</table>
Then inside your controller, just pass the product into your modal load function. For example:
$scope.loadItem = function(product){
var modalInstance = $modal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
product: function () {
return product;
}
}
});
};
See how you can pass the product to the function, and then use resolve to pass the product into the modal. In your modal controller you would attach the product to the $scope, and use it as you would any other view.

View not updating after form submit

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.

Resources