Here is my Knockout ViewModel
$(document).ready(
function () {
var Crime = function (CaseNumber, DateOfIncident, Description) {
this.CaseNumber = CaseNumber;
this.DateOfIncident = DateOfIncident;
this.Description = Description;
}
var crimes = function (items) {
var self = this;
//Data
self.items = ko.observableArray(items)
//operations
self.addCrime = function () {
if ($("#AddCrimeForm").valid()) {
self.crime = new Crime($("#CaseNumber").val(), $("#DateOfIncident").val(), $("#Description").val());
//var JSONObj = { CaseNumber: $("#CaseNumber").val(), DateOfIncident: $("#DateOfIncident").val(), Description: $("#Description").val() };
self.items.push(this.crime);
$("#CaseNumber").val("");
$("#DateOfIncident").val("");
$("#Description").val("");
}
}
self.removeCrime = function (item) {
self.items().remove(item);
}
}
var initialData = new Array();
ko.applyBindings(crimes(initialData), $("#CrimeList")[0])
}
);
Here is my View, in HTML:
<form id="AddCrimeForm">
<div class="panel panel-success">
<div class="panel-heading">
<div class="form-horizontal">
<div class="row">
<div class="col-lg-11">Add a crime incident to the list</div>
<div class="col-lg-1">
<button type="button" class="btn btn-success btn-xs" onclick="addCrime()"><i class="fa fa-plus"></i> Add</button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="row">
<div class="col-lg-6">
<input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="">
<div class="form-group">
<label class="control-label col-md-4" for="CaseNumber">Case Number</label>
<div class="col-md-8">
<input class="form-control text-box single-line" data-val="true" data-val-required="The Case Number field is required." id="CaseNumber" name="CaseNumber" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="CaseNumber" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4" for="DateOfIncident">Date Of Incident</label>
<div class="col-md-8">
<input class="form-control text-box single-line valid" data-val="true" data-val-required="The Date of Incident field is required." id="DateOfIncident" name="DateOfIncident" type="date" value="">
<span class="field-validation-valid" data-valmsg-for="DateOfIncident" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label col-md-4" for="Description">Description</label>
<div class="col-md-8">
<textarea class="form-control text-box multi-line" data-val="true" data-val-required="The Description field is required." id="Description" name="Description"></textarea>
<span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<table class="table table-striped table-hover " id="CrimeList">
<thead>
<tr>
<th>Case Number</th>
<th>Date of Incident</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: $data.CaseNumber" class="col-lg-2">Column content</td>
<td data-bind="text: $data.DateOfIncident" class="col-lg-2">Column content</td>
<td data-bind="text: $data.Description" style="text-wrap: normal" class="col-lg-7">Column content</td>
#*<td></td>
<td></td>
<td></td>*#
<td style="text-align: center" class="col-lg-1">
<i class="fa fa-trash-o"></i> Remove
</td>
</tr>
</tbody>
</table>
The error I get when adding an item relates to the binding of the "Remove" link in the table, and is as follows:
Unhandled exception at line 58, column 363 in
http://localhost:49803/Scripts/KnockOut/knockout-3.0.0.js
0x800a138f - JavaScript runtime error: Unable to get property
'removeCrime' of undefined or null reference
Now, I'm not sure what the problem here is, since I am supposed to be binding to the root, since the removeCrime method resides in the root of the ViewModel?
You are setting the removeCrime function on the window object, as crimes function is being executed in the global scope, and this points to the window.
Try using new keyword when setting a viewModel.This will create new object and set it as this.
You should also attach the add method to the window if you want to call it outside of knockout.
Another error is that you are calling remove() on an JS Array not on observable Array.
Here is the working code:
$(document).ready(
function () {
var Crime = function (CaseNumber, DateOfIncident, Description) {
this.CaseNumber = CaseNumber;
this.DateOfIncident = DateOfIncident;
this.Description = Description;
}
var crimes = function (items) {
var self = this;
//Data
self.items = ko.observableArray(items)
//operations
window.addCrime = function () {
if ($("#AddCrimeForm")) {
crime = new Crime($("#CaseNumber").val(), $("#DateOfIncident").val(), $("#Description").val());
//var JSONObj = { CaseNumber: $("#CaseNumber").val(), DateOfIncident: $("#DateOfIncident").val(), Description: $("#Description").val() };
self.items.push(this.crime);
$("#CaseNumber").val("");
$("#DateOfIncident").val("");
$("#Description").val("");
}
}
self.removeCrime = function (item) {
self.items.remove(item);
}
}
var initialData = new Array();
ko.applyBindings(new crimes(initialData), $("#CrimeList")[0])
}
);
I check your code and according to me you are missing the real power of knockout. If you are using knockout than i think there is no need to access values of input fields using jquery selectors.
I have created a js fiddle, check this:
demo fiddle
And the javascript code will look something like:
function crimeRecord(data)
{
var self = this;
self.caseNumber = data.CaseNumber;
self.dateOfIncident = data.DateOfIncident;
self.description = data.Description;
}
//Main view model
function viewModel()
{
var self = this;
self.crimeRecords = ko.observableArray();
self.newCrimeRecord = ko.observable(new crimeRecord({}));
self.addRecord = function(){
self.crimeRecords.push(self.newCrimeRecord());
self.newCrimeRecord(new crimeRecord({}));
};
self.removeRecord = function(record){
self.crimeRecords.remove(record);
};
}
$(function(){
ko.applyBindings(new viewModel());
});
Edit - 1
As you mention doubt in your comment regarding to jquery validation, there is no need to rewrite any validation logic you can use jquery validation with this viewmodel. The following is the one way to use it:
....
self.addRecord = function(){
if($("form").valid())
{
self.crimeRecords.push(self.newCrimeRecord());
self.newCrimeRecord(new crimeRecord({}));
}
else
$("form").showErrors();
};
...
Or you can use Knockout Validation.
Related
I have trying to get the values out of a form when the register button is clicked.
setupFormUI() and the relevant form fields are saved in variables
$($rego_form).on("submit", getRegistrationFormValue); is called - a handler should be able to have access to setupFormUI() variables (closure) but it seems to not do anything
ISSUE: getRegistrationFormValue doesn't log anything. I can make it work if I pass arguments to the function... but I want to use
closure
setupFormUI();
function setupFormUI() {
var $name = $("#name");
var $age = $("#age");
var $department = $("#department");
var $position = $("#position");
var $rego_form = $("#rego-form");
$($rego_form).on("submit", getRegistrationFormValue);
}
function getRegistrationFormValue() {
// alert("asdasd");
var name = $name.val();
var age = $age.val();
var department = $department.val();
var position = $position.val();
console.log("----->", name, age, position, department);
}
html
<form id="rego-form">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Company (disabled)</label>
<input type="text" class="form-control" disabled placeholder="Company" value="Creative Code Inc.">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>name</label>
<input type="text" id="name" class="form-control" placeholder="name" value="michael">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Age</label>
<input id="age" class="form-control" placeholder="age">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Department Name</label>
<input type="text" id="department" class="form-control" placeholder="department" value="Marketing">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Position</label>
<input type="text" id="position" class="form-control" placeholder="position" value="social media manager">
</div>
</div>
</div>
<button type="submit" id="rego-user-btn" class="btn btn-info btn-fill pull-right">Register</button>
<div class="clearfix"></div>
</form>
You need the variables to be in scope, you can use an anonymous closure as a callback to achieve this.
setupFormUI();
function setupFormUI() {
var $name = $("#name");
var $age = $("#age");
var $department = $("#department");
var $position = $("#position");
var $rego_form = $("#rego-form");
$rego_form.on("submit", function(){
var name = $name.val();
var age = $age.val();
var department = $department.val();
var position = $position.val();
console.log("----->", name, age, position, department);
});
}
An alternative to the accepted answer — give the "handler" a meaningful context of this with Function.prototype.bind(), or maybe just use the ES6 class.
setupFormUI();
function setupFormUI() {
var args = {
$name: $("#name"),
$age: $("#age"),
$department: $("#department"),
$position: $("#position"),
$rego_form: $("#rego-form")
}
args.$rego_form.submit(getRegistrationFormValue.bind(args));
}
function getRegistrationFormValue(e) {
var name = this.$name.val();
var age = this.$age.val();
var department = this.$department.val();
var position = this.$position.val();
console.log("----->", name, age, position, department);
e.preventDefault();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="rego-form" action="#">
<input id="name" value="John Doe" />
<input id="age" value="37" />
<input id="department" value="Some dept" />
<input id="position" value="Debt collector" />
<button type="submit">Submit</button>
</form>
This is no closure, if the variable in setupFormUI is referenced, it is a closure.
getRegistrationFormValue is just a variable whose function is passed directly to the event trigger (and is asynchronous), note that it is not executed in setupFormUI, nor is it defined in setupFormUI, When it is executed, it has nothing to do with setupFormUI.
Mike Zinn's answer defines an anonymous function in setupFormUI, which in turn refers to the variable in setupFormUI, which is a closure.
I have an observable array that contains a list of object that I want to filter through based on a user input. If the user searches a word that appears in the array in two different places then the filter function should return the title of both objects and delete or hide all other objects in the array that did not match the input from the user. I must use knockout js to preform this feature which is still new to me. Currently my filter function checks to see if the user input is included in a title of one of the objects within the array and if it is not then it removes the object. However, this not providing me what I need as it does not accurately filter the list.
My ViewMode
var viewModel = function() {
var self = this;
self.filter = ko.observable('');
self.locationList = ko.observableArray(model);
self.filterList = function(){
return ko.utils.arrayFilter(self.locationList(), function(location) {
if(location.title == self.filter()){
return location.title
}
else if( location.title.includes(self.filter()) ){
return location.title
}
else{
return self.locationList.remove(location)
}
});
};
}
The View
<section class="col-lg-2 sidenav">
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<input data-bind="textInput: filter"
type="text" class="form-control" placeholder="Filter Places"
aria-describedby="basic-addon2" id="test">
<button data-bind="click: filterList id="basic-addon2">
<i class="glyphicon glyphicon-filter"></i>
Filter
</button>
</div>
</div>
<div class="col-lg-12">
<hr>
<div data-bind="foreach: locationList">
<p data-bind="text: $data.title"></p>
</div>
</div>
</div>
</section>
The answer to the question can be found here answered by Viraj Bhosale
ViewModel
var viewModel = function() {
var self = this;
self.filter = ko.observable('');
self.locationList = ko.observableArray(model);
self.filterList = ko.computed(function(){
return self.locationList().filter(
function(location){
return (self.filter().length == 0 || location.title.toLowerCase().includes(self.filter().toLowerCase()));
}
);
});
}
View
<main class="container-fluid">
<div class="row">
<section class="col-lg-2 sidenav">
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<input data-bind="textInput: filter, valueUpdate: 'keyup'"
type="text" class="form-control" placeholder="Filter Places"
aria-describedby="basic-addon2" id="test">
</div>
</div>
<div class="col-lg-12">
<hr>
<div data-bind="foreach: filterList">
<p data-bind="text: $data.title"></p>
</div>
</div>
</div>
</section>
<section class="col-lg-10" id="map"></section>
</div>
I am working in ASP.Net MVC4. My div elements contents are generated in a loop as below:
#foreach (var product in Model.Products)
{
<div class="col-md-2 vcenter">
<span class="product-price">Preço: #Model.Price.ToString("C")</span>
</div>
#if (Model.IsValid != null && Model.IsValid != "")
{
<div class="col-md-2" style="text-align: end;">
<span>Enter number.</span>
</div>
<div class="col-md-2 vcenter" style="text-align: end;">
#Html.TextBoxFor(m => m.CouponTemp, new {
#class = "product-discount-coupon",
chart_price = Model.Price.ToString(),
dicsount_price = Model.SpecialPrice.ToString(),
product_coupon = Model.Coupon,
style = "width:50px;"
})
<button type="button" class="apply-discount">Recalculate</button>
</div>
}
}
JavaScript portion
$(".apply-discount").on("click", function () {
var applyCoupon = $(this).parent().find(".product-discount-coupon").val();
var price = $(this).parent().find(".product-price").val();
var cost = 0;
if (applyCoupon === NaN) {
applyCoupon = 0;
}
if (price === NaN) {
price = 0;
}
$(this).parent().find(".product-price").val(applyCoupon);
});
Browser generated html is below
<div>
<div class="col-md-1">
<img src="/Astrology/Product/GetImage/51da66b7-3cb9-418b-ae9a-bc9fe8073b26" style="width: 50px; height: 50px;" alt="Mapa Natal Cármico" />
</div>
<div class="col-md-6 vcenter">
<span style="font-size: large">Mapa Natal Cármico. Escrito por Marcelo Dalla</span>
</div>
<div class="col-md-2 vcenter">
<span class="product-price">Preço: R$ 44,00</span>
</div>
<div class="col-md-2 vcenter" style="text-align: end;">
<button type="button" class="dec-count">-</button>
<input chart-price="44,0000" class="product-count" data-val="true" data-val-number="The field Quantity must be a number." data-val-required="The Quantity field is required." dicsount-price="10,0000" id="products_7819060a-0f29-4637-83de-9262beb1a13f__Quantity" name="products[7819060a-0f29-4637-83de-9262beb1a13f].Quantity" product-coupon="10" readonly="readonly" style="width:50px;" type="text" value="1" />
<button type="button" class="inc-count">+</button>
</div>
<span>If you have a discount coupon for the purchase please enter it here and press the recalculate button.</span>
<div class="col-md-2 vcenter" style="text-align: end;">
<input chart-price="44,0000" class="product-discount-coupon" dicsount-price="10,0000" id="products_7819060a-0f29-4637-83de-9262beb1a13f__CouponTemp" name="products[7819060a-0f29-4637-83de-9262beb1a13f].CouponTemp" product-coupon="10" style="width:50px;" type="text" value="" />
<button type="button" class="apply-discount">Recalculate</button>
<input id="apply-product-coupon" type="hidden" name="apply-product-coupon">
</div>
<div class="col-md-1 vcenter">
<a href="/Astrology/Shop/DeleteFromCard?productId=41f7e40b-62ad-4202-964a-cbed7381b06c">
<i class="fa fa-remove"></i>
</a>
</div>
</div>
When the user clicks on the Recalculate button I want to put CouponTemp textbox value in another span. Note that clicking on block-1 does not impact on block-2 or rest, in the same way click on block-2 not impact on another block content.
<span>Preço: #Model.Price.ToString("C")</span>
Here is your script:
$(document).ready(function(){
$("button.apply-discount").click(function(){
//get your input value
var discount = $(this).prev('input.product-discount-coupon').first().val();
//Get your span
var resultSpan = $(this).parent().prev().prev().prev().find('span');
//Update your span with input value
resultSpan.html("Preço: R$ " + discount);
});
});
I create JSFiddle to show how it works.
Following code snippet may help you.
$(".apply-discount").on("click", function () {
var applyCoupon = $(this).parent().find(".product-discount-coupon");
var price = applyCoupon.val();
//to get others info
var chart_price= applyCoupon.attr('chart_price');
var dicsount_price= applyCoupon.attr('dicsount_price');
var product_coupon= applyCoupon.attr('product_coupon');
$(this).parent().prev().prev().find(".product-price").html('Preço: '+price*1);
});
N.B: price*1 will convert it to a number.
Well, pretty easy if you just assign ids to the elements. Use something like id from your product to ensure they are unique and match.
#foreach (var product in Model.Products)
{
<div class="col-md-2 vcenter">
<span>Preço: #Model.Price.ToString("C")</span>
</div>
#if (Model.IsValid != null && Model.IsValid != "")
{
<div class="col-md-2" style="text-align: end;">
<span id="#product.Id">Enter number.</span>
</div>
<div class="col-md-2 vcenter" style="text-align: end;">
#Html.TextBoxFor(m => m.CouponTemp, new {
#class = "product-discount-coupon",
chart_price = Model.Price.ToString(),
dicsount_price = Model.SpecialPrice.ToString(),
product_coupon = Model.Coupon,
style = "width:50px;",
id = "txt_" + #product.Id
})
<button type="button" class="apply-discount" onclick="adjustPrice(#product.Id);">Recalculate</button>
</div>
}
}
Then have a function that handles it:
<script type="text/javascript">
var adjustPrice = function (id) {
var txt = $('#txt_' + id).val();
$('#' + id).val(txt);
};
</script>
I'm creating editing a variable length list using knockout.
When I click Add Button, it will add a DropDownList and a TextBox to the screen. I've successfully load the data from database to DropDownList, but it always populating the data every time I clicked Add Button.
Code:
<div class="form-horizontal" data-bind="with: purchaseOrder">
<h4>Purchase Order</h4>
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="PurchaseOrderDate">PO Date</label>
<div class="col-md-10">
<input class="form-control" data-bind="value: PurchaseOrderDate" placeholder="Purchase Order Date" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="InvoiceNo">Invoice No</label>
<div class="col-md-10">
<input class="form-control" data-bind="value: InvoiceNo" placeholder="Invoice No" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Memo">Memo</label>
<div class="col-md-10">
<input class="form-control" data-bind="value: Memo" placeholder="Enter Memo" />
</div>
</div>
</div>
<h4>Details</h4>
<hr />
<table class="table">
<thead>
<tr>
<th>Item Name</th>
<th>Qty Order</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: purchaseOrderDetails">
<tr>
<td>
<select class="form-control" data-bind="options: AX_INVENTSUMs, optionsText: 'ITEMNAME', optionValue: 'ITEMID'"></select>
</td>
<td>
<input class="form-control" data-bind="value: QuantityOrder" placeholder="Enter Quantity Order">
</td>
<td>
<a class="btn btn-sm btn-danger" href='#' data-bind=' click: $parent.removeItem'>X</a>
</td>
</tr>
</tbody>
</table>
<p>
<button class="btn btn-sm btn-primary" data-bind='click: addItem'>Add Item</button>
</p>
#section Scripts {
#Scripts.Render("~/bundles/knockout")
<script>
$(function () {
var PurchaseOrder = function (purchaseOrder) {
var self = this;
self.PurchaseOrderID = ko.observable(purchaseOrder ? purchaseOrder.PurchaseOrderID : 0);
self.PurchaseOrderDate = ko.observable(purchaseOrder ? purchaseOrder.PurchaseOrderDate : '');
self.InvoiceNo = ko.observable(purchaseOrder ? purchaseOrder.InvoiceNo : '');
self.Memo = ko.observable(purchaseOrder ? purchaseOrder.Memo : '');
};
var PurchaseOrderDetail = function (purchaseOrderDetail, items) {
var self = this;
self.PurchaseOrderDetailID = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.PurchaseOrderDetailID : 0);
self.PurchaseOrderID = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.PurchaseOrderDetailID : 0);
self.ItemID = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.ItemID : 0);
self.QuantityOrder = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.QuantityOrder : 0);
self.QuantityBonus = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.QuantityBonus : 0);
self.AX_INVENTSUMs = ko.observableArray(items);
};
var PurchaseOrderCollection = function () {
var self = this;
self.purchaseOrder = ko.observable(new PurchaseOrder());
self.purchaseOrderDetails = ko.observableArray([new PurchaseOrderDetail()]);
self.CashedArray = ko.observableArray([]);
$.getJSON("/AX_INVENTSUM/GetAX_INVENTSUMs", null, function (data) {
var array = [];
$.each(data, function (index, value) {
array.push(value);
});
self.CashedArray(array);
});
self.addItem = function () {
self.purchaseOrderDetails.push(new PurchaseOrderDetail(null, self.CashedArray));
};
self.removeItem = function (purchaseOrderDetail) {
self.purchaseOrderDetails.remove(purchaseOrderDetail);
};
};
ko.applyBindings(new PurchaseOrderCollection());
});
</script>
}
As you can see in the code above, how to make this occurs only once a time?
You must cache your list somewhere. I prefer to do it in something like parent view model. See bellow.
var OrderList = function(){
var self = this;
...
self.CashedArray = ko.observableArray(new Array());
$.getJSON("/AX_INVENTSUM/GetAX_INVENTSUMs", null, function (data) {
var array = [];
$.each(data, function (index, value) {
array.push(value);
});
self.CashedArray(array);
});
self.AddButtonClick = function (){
var orderDetails = new PurchaseOrderDetail(self.CashedArray());
};
};
var PurchaseOrderDetail = function (items) {
var self = this;
...
self.AX_INVENTSUMs = ko.observableArray(items);
};
I am pretty new to angular and web development in general and I cannot for the life of me figure out what is wrong with my code. Essentially I'm just trying to add to a table that uses ng-repeat by using $scope.arrayname.push. Let me know if I wasn't clear on something. Here are the relevant files:
My angular file:
var routerApp = angular.module('routerApp', ['ui.router']);
...
routerApp.controller('eventController', function($scope) {
$scope.events = [];
$scope.addEvent = function () {
$scope.events.push ({
name: $scope.eventName,
start: $scope.startDate,
end: $scope.endDate,
location: $scope.locationid
});
// Clear input fields after push
$scope.eventName = "";
$scope.startDate = "";
$scope.endDate = "";
$scope.locationid = "";
};
});
and here is my html file where the input goes:
<div class="jumbotron text-center">
<h2>The Event Page </h2>
</div>
<div class="row">
<div class="col-sm-6" ng-controller="eventController">
<div ui-view="columnOne"></div>
<input value="" type="text" placeholder="Name of Event" ng-model="eventName">
<input value="" type="text" placeholder="Start Date" ng-model="startDate">
<input value="" type="text" placeholder="End Date" ng-model="endDate">
<input value="" type="text" placeholder="Location" ng-model="locationid">
<button ng-click="addEvent()">Add to Event List</button>
</div>
<div class="col-sm-6">
<div ui-view="columnTwo"></div>
</div>
</div>
And the data should be outputed in a table here:
<tbody>
<tr ng-repeat="event in events">
<td>{{ event.name }}</td>
<td>{{ event.start }}</td>
<td>{{ event.end }}</td>
<td>{{ event.location }}</td>
<!---<td>{{ event.link }}</td>--->
</tr>
</tbody>
I am using partial views with routerApp from angular. Here is my plunker: http://plnkr.co/edit/FBoWuEQYhCwtTtNN9Wrk?p=preview
Any help is appreciated!
I had to make a few changes to get this to work. The main issue is that the scope isn't being preserved between your table view and the button press so even though the value is bound (you can console.log(events) and it will output correctly) it doesn't display.
First I named the controller ec and moved it up a level
<div class="jumbotron text-center">
<h2>The Event Page </h2>
</div>
<div class="row" ng-controller="eventController as ec">
<div class="col-sm-6" >
<div ui-view="columnOne"></div>
<input value="" type="text" placeholder="Name of Event" ng-model="eventName">
<input value="" type="text" placeholder="Start Date" ng-model="startDate">
<input value="" type="text" placeholder="End Date" ng-model="endDate">
<input value="" type="text" placeholder="Location" ng-model="locationid">
<button ng-click="ec.addEvent()">Add to Event List</button>
</div>
<div class="col-sm-6">
<div ui-view="columnTwo"></div>
</div>
</div>
Then I changed the controller to point to "this" instead of $scope
routerApp.controller('eventController', function($scope) {
var ec = this;
ec.events = [];
ec.addEvent = function () {
ec.events.push ({
name: $scope.eventName,
start: $scope.startDate,
end: $scope.endDate,
location: $scope.locationid
});
// Clear input fields after push
$scope.eventName = "";
$scope.startDate = "";
$scope.endDate = "";
$scope.locationid = "";
};
});
And finally I changed the ng-repeat to use ec.events
<tr ng-repeat="event in ec.events">
There's probably a better way to do it with services or something like that to share the scope but that's all I could get to work.