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>
Related
I'm having some issues on adding rows in a table using a button.
here is my HTML(note that i have 2 elements with the same custom directive, sure that works):
<input class="form-control" id="dispatcherPod" ng-model="pod.pod">
<exa-datepicker model="pod.startDate" required="true"disabled="true" min-mode="day"id="podStartDate"
format="yyyy-MM-dd" readonlydata="false"></exa-datepicker>
<exa-datepicker model="pod.endDate" required="true" disabled="true"
min-mode="day" id="podEndDate" format="yyyy-MM-dd"
readonlydata="false"></exa-datepicker>
<button type="button" class="btn btn-primary pull-right"
ng-click="puntualAdd()">{{'PUNTUAL_ADD' | translate}}</button>
here is my js:
$scope.puntualAdd = function (){
if($scope.pod.pod == undefined || $scope.pod.pod == null){
$scope.errorPod=true;
$scope.errorMessage.push("field_required_pod");
}
if($scope.pod.startDate == undefined || $scope.pod.startDate == null){
$scope.errorStartDate=true;
$scope.errorMessage.push("field_required_startDate");
}
if($scope.pod.endDate == undefined || $scope.pod.endDate == null){
$scope.errorEndDate=true;
$scope.errorMessage.push("field_required_endDate");
}
if($scope.errorMessage.length==0){
$scope.puntualSupply={};
$scope.puntualSupply.supply_code=$scope.pod.pod;
$scope.puntualSupply.start_date= $scope.pod.startDate.toString();
$scope.puntualSupply.end_date= $scope.pod.endDate.toString();
$scope.puntualSupply.state= "NULL";
$scope.insSupplies.push($scope.puntualSupply);
}
}
and here is have the table that shows data :
<table class="table" ng-controller="SpotDispatcherController">
<thead>
<tr>
<th class="col-order">{{'POD' | translate}}</th>
<th class="col-order">{{'CUSTOMER_DENOMINATION'| translate}}</th>
<th class="col-order">{{'VAT_NUMBER'| translate}}</th>
<th class="col-order">{{'START_DATE'| translate}}</th>
<th class="col-order">{{'END_DATE'| translate}}</th>
<th class="col-order">{{'STATE'| translate}}</th>
<th class="colf-cmd"></th>
<th class="col-order">{{'ERROR_DESCRIPTION'| translate}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in insSupplies">
<td>{{row.supply_code}}</td>
<td>WIP</td>
<td>WIP</td>
<td>{{row.start_date}}</td>
<td>{{row.end_date}}</td>
<td>{{row.state}}</td>
<td class="colf-cmd">
<div class="form-group">
<div class="form-btn-container text-center">
<button type="button" class="btn btn-primary"
ng-click="deleteRecord()">X</button>
</div>
</div>
</td>
<td>{{row.state}}</td>
</tr>
</tbody>
</table>
Note that I have previous data that is being shown in the table, and I want to add some other, but when I do that, my $scope.insSupplies take the data I wrote in the inputs, but doesn't show that in the table
No errors are given, not even in console, and I'm trying to achieve it without any <a> tag
Here is a plunkr of my code.
EDIT: instead of downvoting, you could tell me how to improve my question
Your issue is that you have ng-controller twice. You only need it once on the <body>. Also, I changed your code so that you're passing in the value you want to use puntualAdd() function. It's better practice and overall makes more sense. Hope that helps!
HTML:
<body ng-controller="SpotDispatcherController">
<ng-form>
<div class="form-inline">
<div class="row">
<div class="form-group">
<label title="POD" for="dispatcherPod">POD</label>
<input class="form-control" id="dispatcherPod" ng-model="pod.pod">
</div>
</div>
</div>
<button type="button" class="btn btn-primary pull-right" ng-click="puntualAdd(pod.pod)">PUNTUAL_ADD</button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="col-order">POD</th>
<th class="col-order">DENOMINATION</th>
<th class="col-order">VAT_NUMBER</th>
<th class="col-order">STATE</th>
<th class="colf-cmd"></th>
<th class="col-order">ERROR_DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in insSupplies">
<td>{{row.supply_code}}</td>
<td>WIP</td>
<td>WIP</td>
<td>{{row.state}}</td>
<td class="colf-cmd">
<div class="form-group">
<div class="form-btn-container text-center">
<button type="button" class="btn btn-primary" ng-click="deleteRecord()">X</button>
</div>
</div>
</td>
<td>{{row.state}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-form>
</body>
JavaScript:
var app = angular.module('plunker', []);
app.controller('SpotDispatcherController', ['$scope',
function($scope) {
$scope.insSupplies = [];
$scope.pod = [];
$scope.puntualAdd = function(input) {
$scope.insSupplies.push({
id: null,
dispatch_id:null,
supply_code: input,
magnitude:null,
stat: "NULL",
state_desc: null,
start_date_val: null,
end_date_val: null,
ext_date: null,
aut_mod: null,
date_mod: null
});
};
}
]);
Working Code: Plunkr
If your code is working fine, and your array "$scope.insSupplies" updated successfully everything should work fine.
Check this answer it might help you: How to add dynamic row to a table using angularjs
I have the following code structure where inside a modal-popup, I've populated rows of a table using ng-repeat. Now I want to pass the values of 3 columns of all the rows to the controller but I dont know how exactly I would be able to use the data outside ng-repeat scope and pass to the controller. Here's my code snippet -
<div class="inmodal">
<div class="modal-header" ng-model="modalDetails">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">×</button>
<img ng-src={{$root.varImg}} class="m-b-md" alt="profile">
<h4 class="modal-title">{{$root.assetGrpNm}}</h4>
</div>
<div class="modal-body" >
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<div ng-repeat="dataag in detail.outerData" >
<table class="table table-striped table-bordered table-hover">
<thead>
<!-- --------- I tried using this piece of code thinking that atleast the values would be inside ng-repeat scope
<tr><button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="save(deviceId,dataDeviceData.measurementData,newDeviceValue,dataDeviceData.lastReadingDateTime)">Save</button></tr>
-->
<tr>
<th>Id</th>
<th>Name</th>
<th>Last Value</th>
<th>Current Value</th>
<th>Date Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dataDevice in dataag.innerData track by $index">
<td>
<span style="font-weight: 800;"><span ng-model="deviceId">{{dataDevice.managedDeviceInfo.id}}</span> - {{dataDevice.managedDeviceInfo.deviceExternalId}}</span>
</td>
<td ng-repeat="dataDeviceData in dataDevice.deviceCoreData">{{dataDevice.managedDeviceInfo.deviceName }} - <span class="text-center">({{ dataDeviceData.quantityUnitSymbol }})</span></td>
<td ng-repeat="dataDeviceData in dataDevice.deviceCoreData">
<input type="number" class="form-control" id="modal_val" ng-model="dataDeviceData.measurementData" required style="width: 100px;"></td>
<td ng-repeat="dataDeviceData in dataDevice.deviceCoreData">
<input type="number" class="form-control" id="modal_val" ng-model="newDeviceValue" required style="width: 100px;"></td>
<td style="position: relative;">
<div id="datetimepicker1-{{$index}}" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" ng-model="dataDeviceData.lastReadingDateTime"></input>
<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="save(deviceId,dataDeviceData.measurementData,newDeviceValue,dataDeviceData.lastReadingDateTime)">Save</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="ok()">Cancel</button>
</div>
</div>
Below is an image showing the logic -
I'd like to add a custom filter on my angularJS app. I want di strike text like this way if the object in the ng-repat has the isDeleted flag set as true. Code: here the HTML:
<table id="tableText" class="table table-hover table-striped" ng-init="allNews()">
<tr>
<th>Titolo</th>
<th>Text</th>
<th>Disattivato</th>
<th>Modifica</th>
<th ng-if="!cancelDelete">Elimina</th>
<th ng-if="cancelDelete">Annulla</th>
</tr>
<tr ng-repeat="news in allNews | filter: deleteTitleText(news)">
<td>
<div ng-hide="editingData[news.id]">{{ news.title }}</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]">{{ news.arg }}</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div>
<div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div>
<div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div>
<div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div>
</td>
</tr>
</table>
The JS:
app.filter('deleteTitleText', function () {
return function (news) {
if (news.isDeleted == true) {
news.title = "<span><del>" + news.title + "</del></span>";
news.arg = "<span><del>" + news.arg + "</del></span>";
}
return news;
}
});
This is a good way to implement this kind of filter? For now I receive this error: angular.js:13920 Error: [filter:notarray] Expected array but received: function (). Thanks
OPTION 1:
<table id="tableText" class="table table-hover table-striped" ng-init="allNews()">
<tr>
<th>Titolo</th>
<th>Text</th>
<th>Disattivato</th>
<th>Modifica</th>
<th ng-if="!cancelDelete">Elimina</th>
<th ng-if="cancelDelete">Annulla</th>
</tr>
<tr ng-repeat="news in allNews">
<td>
<div ng-hide="editingData[news.id]">
<span ng-hide="news.isDeleted">{{ news.title }}</span>
<span ng-show="news.isDeleted"><del>{{ news.title }}</del></span>
<!-- USING ng-if -->
<!--
<span ng-if="!news.isDeleted">{{ news.title }}</span>
<span ng-if="news.isDeleted"><del>{{ news.title }}</del></span>
-->
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]">
<span ng-hide="news.isDeleted">{{ news.arg }}</span>
<span ng-show="news.isDeleted"><del>{{ news.arg }}</del></span>
<!-- USING ng-if -->
<!--
<span ng-if="!news.isDeleted">{{ news.arg }}</span>
<span ng-if="news.isDeleted"><del>{{ news.arg }}</del></span>
-->
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div>
<div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div>
<div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div>
<div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div>
</td>
</tr>
</table>
OPTION 2:
<span ng-bind-html="news | deleteTitleText"></span>
app.filter('deleteTitleText', function ($sce) {
return function (input) {
if(input.isDeleted) {
output = $sce.trustAsHtml("<del>"+input.title+"</del>");
} else {
output = $sce.trustAsHtml("<span>"+input.title+"</span>");
}
return output;
};
});
remove filter from ng-repeat <tr ng-repeat="news in allNews">
So final would be similar to :
<tr ng-repeat="news in allNews">
<td>
<div ng-hide="editingData[news.id]">
<span ng-bind-html="news | deleteTitleText"></span>
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
....
....
Hope this helps
You need to alter you filter to expect the entire allNews array/object and work with that instead of just a single item in the list.
This might help.
For instance:
app.filter('deleteTitleText', function () {
return function (allNews) {
var filtered = [];
angular.forEach(allNews, function(news) {
if (news.isDeleted == true) {
news.title = "<span><del>" + news.title + "</del></span>";
news.arg = "<span><del>" + news.arg + "</del></span>";
}
filtered.push(news);
});
return filtered;
}
});
Your ng-repeat should be changed from:
ng-repeat="news in allNews | filter: deleteTitleText(news)"
To:
ng-repeat="news in allNews | deleteTitleText"
Try to use ng-style, like in this plunker: https://plnkr.co/edit/0koMSQ54gUChdpB4Vrrm?p=preview
!item.isDisabled ? {'text-decoration': 'line-through'} : {'text-decoration': 'none'}
You can simply use ng-show and ng-hide
<tr ng-repeat="news in allNews">
<span ng-show="news.isDeleted"><del>{{news.title}}</del></span>
<span ng-show="news.isDeleted"><del>{{news.arg}}</del></span>
<span ng-hide="news.isDeleted"><del>{{news.title}}</del></span>
<span ng-hide="news.isDeleted"><del>{{news.arg}}</del></span>
.
.
.
</tr>
How do I show different modal data on each subjects displayed?
My Problem: Showing same modal data on each subjects displayed.
My blade view
#section('content')
<!-- Main content -->
<section class="content" style="background-color:#fff; padding-bottom:50px;" id="subjects">
<div class="subjects-content">
<h3>List of Subjects</h3>
<div class="box-body box-self-evaluation" v-show="subjects.length > 0">
<table id="example2" class="table table-hover table-striped sortable">
<thead>
<tr>
<th>Subject Area</th>
<th>Course Title</th>
<th>Failed</th>
<th>View more</th>
</tr>
</thead>
#foreach ($all_subjects as $subject)
<tbody>
<tr>
<td>
<span> {{ $subject->subject_code }}</span>
</td>
<td>
<span> {{ $subject->description }} </span>
</td>
<td>
<span> {{ $subject->grade()->where('grade','F')->count() }} </span>
</td>
<td><span> <div class="btn btn-crimson btn-inline-block" data-toggle="modal" data-target="#myModal">View more info</div> </span></td>
</tr>
</tbody>
#endforeach
</table>
</div>
<div class="confirmation-buttons-self-evaluation">
<div class="btn btn-blueviolet btn-inline-block btn-create">Go to Self-Evaluation Page</div>
</div>
#foreach ($all_subjects as $subject)
<!--MODAL -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- MODAL content -->
<div class="modal-content" style="width:70%; margin:0 auto; margin-top:100px; max-height: calc(100vh - 210px); overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Subject: {{ $subject->subject_code }}</h4>
</div>
<div class="modal-body" style="padding-top:0">
<center>
<table class="table">
<thead>
<th colspan="3" style="text-align:center">List of Disgraceful Students</th>
</thead>
<thead class="failed-header">
<th>Section: <span style="color:#000"> CS <!-- SECTION --> </span></th>
<th>Professor: <span style="color:#000"> John Doe <!-- PROF --> </span></th>
<th>Failed: <span style="color:#000"> 2 <!-- NUMBER OF FAILED SA SECTION --> </span></th>
</thead>
<tbody>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Jashuel </td>
</tr>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Caezar </td>
</tr>
</tbody>
</center>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- /. modal content-->
#endforeach
</section>
#endsection
what is wrong with my code?
how do I solve this?
help me please...
any suggestion or comments are well appreciated thank you!
try to change
data-target="#myModal"
to
data-target="#{{$subject->id}}"
and id in <--modal-->
From
id="myModal"
to
id="{{$subject->id}}"
My addAct() funtion was working fine before, until I tried refactoring the index table. Now it isn't responding. Nothing is appearing in the console, for example. Maybe someone can help me figure out what's going on. I use the _form.html partial twice, but take a look at the row with id="newAct"
acts/templates/index.html
<div class="actions_body">
<div class="container">
<h2>Listing Actions</h2>
<div class="body">
<table class>
<thead>
<tr class="row">
<th class="col-md-2 active">
<label>Name</label>
</th>
<th class="col-md-5">Description</th>
<th class="col-md-2">Inspires</th>
<th colspan="2" class="col-md-2">Modify</th>
</tr>
</thead>
<tbody ng-repeat="act in acts">
<tr class="row">
<td class="col-md-2">{{act.name}}</td>
<td class="col-md-5">{{act.description}}</td>
<td class="col-md-2">{{act.inspires}}</td>
<td class="col-md-1"><button ng-click="updateActShow=true">Edit</button></td>
<td class="col-md-1"><button ng-click="deleteAct(act)">Delete</button>
<tr ng-show="updateActShow" ng-include="'acts/templates/_form.html'"></tr>
</tbody>
<tbody>
<tr class="row">
<button ng-click="newActShow=true">New Action</button>
<button ng-click="newActShow=false">Hide</button>
</tr>
<tr ng-show="newActShow" id="newAct" ng-include="'acts/templates/_form.html'"></tr>
</tbody>
</table>
</div>
</div>
</div>
acts/templates/_form.html
<div class="row" ng-controller="ActsController">
<form ng-submit="addAct()">
<td class="col-md-2">
<label for="newActName">Name</label>
<input type="text" ng-model="newAct.name" id="newActName" placeholder="Name" class="form-control">
</td>
<td class="col-md-4">
<label for="newActDescription">Description</label>
<input type="textarea" ng-model="newAct.description" id="newActDescription" placeholder="Description" class="form-control">
</td>
<td class="col-md-2">
<label for="newActInspires">Inspires</label>
<input type="number" ng-model="newAct.inspires" id="newActInspires" placeholder="Inspires" class="form-control">
</td>
<td class="col-md-2">
<input type="submit" value="+" class="btn btn-success">
</td>
</form>
</div>
acts/controllers/ActsController.js
controllers = angular.module('controllers');
controllers.controller('ActsController', [
'$scope',
'$routeParams',
'$location',
'$resource',
function($scope,$routeParams,$location,$resource) {
var Act = $resource('/acts/:actId', {
actId: "#id",
format: 'json'
}, {
'create': {
method: 'POST'
}
});
$scope.acts = Act.query();
$scope.addAct = function() {
act = Act.save($scope.newAct, function() {
$scope.acts.push(act);
$scope.newAct = '';
});
}
$scope.deleteAct = function(act) {
act.$delete();
$scope.acts.splice($scope.acts.indexOf(act), 1);
}
$scope.linkToShowAct = function(act) {
return $location.path('/acts/' + act.id);
}
}]);
You table is outside of ActsController scope. You need to put ng-controller="ActsController" on one of the elements surrounding table.