AngularJS: ng-submit not working - angularjs

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.

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>

Angular - Fill table of items by checked checkbox from another table

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>

How to clear bootstrap modal content with angular (without using jquery)?

i'm developing for the first time with Angular JS and i created the following bootstrap modal in which there is a table with some content and inputs. Here is the code:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>User Menu</h4>
</div>
<div class="modal-body">
<div class="tablecontainer">
<table class="table table-striped table-hover table-condensed">
<colgroup>
<col class="col-md-1">
<col class="col-md-2">
<col class="col-md-2">
<col class="col-md-3">
<col class="col-md-2">
<col class="col-md-2">
</colgroup>
<thead>
<tr>
<th> </th>
<th>Firstname</th>
<th>Lastname</th>
<th>Address</th>
<th>Attachment</th>
<th>Group</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>
<input type="checkbox" value="" ng-model="ctrl.checked[$index]" ng-disabled="ctrl.fileupload!==undefined" ng-change="ctrl.checkBox($index)" />
</td>
<td>{{user.firstname}}</td>
<td>
<select class="form-control" ng-model="user.selectedAddress" ng-change="ctrl.checked[$index] = user.selectedAddress.destAddress" ng-options="o as o.destName for o in user.addresses"></select>
</td>
<td>{{user.selectedAddress.destAddress}}</td>
<td><input type = "text" class="customPart"
ng-model="ctrl.customText[$index]" /></td>
</tr>
</tbody>
</table>
</div>
[...]
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Close</button>
</div>
</div>
</div>
What is the angular way of clearing bootstrap modal to reset the user inputs?
You don't reset the UI to have a fresh model, you wan't to do the contrary. You need to reset the model, then your UI will be reset.
You can write a function that will reset your users array. For example:
function reset() {
for(var i = 0; i < users.length; i++) {
users[i].selectedAddress = null;
}
}

the row can't be deleted correctly using angularjs

I have a table with different rows where I try to delete a single row by clicking on the "delete" button. It works but when I refresh the page by clicking on displaying tables ("Afficher les tables"), I find that the row is not deleted.
Here's my controller
var app=angular.module("MyCat",[]);
app.controller("CatController",function($scope,$http){
$scope.entities=[];
$scope.entity={};
$scope.currentEntity=null;
$scope.selectedEntities=[];
$scope.dataTypes=[];
$scope.field={};
$scope.fields=[];
$scope.records=[];
$scope.rows=[];
$scope.action=null;
$scope.relations=[];
$scope.loadTables=function(){
$http.get("/getTables")
.success(function(data){
$scope.entities=data;
});
$http.get("/getTypes")
.success(function(data){
$scope.dataTypes=data;
console.log($scope.dataTypes);
});
};
$scope.loadTables();
$scope.saveTable=function(){
$http.post("/saveTable",$scope.entity)
.success(function(data){
$scope.entities.push(data);
console.log($scope.entities);
});
};
$scope.getRows=function(){
if($scope.currentEntity!=null){
$http.get("/getAllRecords?entityID="+$scope.currentEntity.id)
.success(function(data){
$scope.rows=data;
console.log($scope.rows);
});
}
};
$scope.saveField=function(){
$scope.field.entity=$scope.currentEntity;
$http.post("/saveField",$scope.field)
.success(function(data){
$scope.fields.push(data);
console.log($scope.entities);
});
};
$scope.deleteField=function(index) {
$scope.fields.splice(index,1);
};
$scope.updateField = function (index) {
};
$scope.saveEdits = function() {
$scope.editmode = false;
$scope.field= angular.copy($scope.currentrow);
};
$scope.showFields=function(t){
$scope.currentEntity=t;
$http.get("/getFields?id="+t.id)
.success(function(data){
$scope.fields=data;
});
//$scope.getRows();
$scope.action="structure";
console.log($scope.currentEntity);
};
$scope.viewTables=function(){
$scope.currentEntity=null;
};
$scope.saveRecord=function(){
console.log($scope.records);
var o={};
o.entityID=$scope.currentEntity.id;
o.record=[];var i=0;
for(id in $scope.records){
o.record[i]={};
o.record[i].fieldID=id;
o.record[i].value=$scope.records[id].value;
++i;
}
console.log(o);
$http.post("/saveRecord",o)
.success(function(data){
console.log(data);
});
};
$scope.view=function(action){
$scope.action=action;
if(action=='rows'){
$scope.getRows();
}
else if(action=='structure'){
$scope.showFields($scope.currentEntity);
}
else if(action=='form'){
console.log("-----------");
console.log($scope.fields);
//$scope.showFields();
for(item in $scope.fields){
var f= $scope.fields[item];
if(f.relation!=null){
$http.get("/getAllRecords?entityID="+f.relation.id)
.success(function(data){
$scope.relations[f.id]=data;
});
}
}
}
};
$scope.deleteTables=function(){
console.log($scope.selectedEntities);
var t=[];
for(item in $scope.selectedEntities){
console.log(item)
if($scope.selectedEntities[item].id!=false){
t.push($scope.selectedEntities[item]);
}
}
console.log(t);
$http.post("/deleteTables",t)
.success(function(data){
$scope.currentEntity={};
$scope.selectedEntities=[];
$scope.loadTables();
});
//}
};
});
Here's my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Catalogue</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.4-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-app="MyCat" ng-controller="CatController" >
<div ng-show="currentEntity==null">
<div class="container spacer" >
<form>
<table>
<tr>
<td><label>Nom Table:</label></td>
<td><input type="text" ng-model="entity.entityName"></td>
<td><button ng-click="saveTable()">Ajouter La table</button> </td>
</tr>
</table>
</form>
</div>
<div class="container spacer">
<table class="table table-hover spacer">
<thead>
<tr>
<th><button ng-click="deleteTables()">delete</button></th>
<th>ID</th>
<th>Nom Table</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="t in entities track by $index" class="clickable"
ng-class="{active:currentEntity.id==t.id}" ng-click="showFields(t)">
<td><input type="checkbox" ng-model="selectedEntities[$index].id" ng-true-value="{{t.id}}"/></td>
<td>{{t.id}}</td>
<td>{{t.entityName}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
</div>
<div class="container spacer" ng-show="currentEntity!=null">
<div class="alert alert-info">
Champs de la table {{currentEntity.entityName}}
<button ng-click="viewTables()">Afficher Les tables</button>
<button ng-click="view('structure')">Structure</button>
<button ng-click="view('form')">Formulaire</button>
<button ng-click="view('rows')">Rows</button>
</div>
<form ng-show="action=='structure'">
<table class="table">
<thead>
<tr>
<th></th><th>ID</th><th>Nom du Champs</th><th>Type</th><th>Relation</th><th>Input Type</th><td>Size</td><th>Primary</th><th>Index</th><th></th>
</tr>
<tbody>
<tr ng-repeat="f in fields track by $index" class="clickable"
ng-class="{active:currentEntity.id==t.id}" ng-click="showFields(t)">
<tr>
<td></td>
<td></td>
<td><input type="text" ng-model="field.fieldName"/></td>
<td><input type="text" ng-model="field.fieldType">
<option ng-repeat="dt in datatypes" value="{{dt.id}}">{{dt.typeName}}</option>
</td>
<td>
<select ng-show="field.fieldType.id==6" ng-model="field.relation.id">
<option value="null">----------</option>
<option ng-repeat="t in entities" value="{{t.id}}">
{{t.entityName}}
</option>
</select>
</td>
<td>
<select ng-model="field.inputType">
<option value="text">text</option>
<option value="checkbox">checkbox</option>
<option value="radio">radio</option>
<option value="radio">select</option>
</select>
</td>
<td><input type="text" ng-model="field.size"/></td>
<td><input type="checkbox" ng-model="field.primary"/></td>
<td><input type="checkbox" ng-model="field.index"/></td>
<td><button ng-click="saveField()">Save</button></td>
</tr>
<tr ng-repeat="f in fields" track by $index" class="clickable" >
<!-- <td><input type="checkbox" ng-model="selectedEntities[$index].id" ng-true-value="{{f.id}}"/></td> -->
<td><input type="checkbox" ng-model="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.id}}</span>
<input type="text" ng-model="f.id" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.fieldName}}</span>
<input type="text" ng-model="f.fieldName" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.fieldType.typeName}}</span>
<input type="text" ng-model="f.fieldType.typeName" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.relation.entityName}}</span>
<input type="text" ng-model="f.relation.entityName" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.inputType}}</span>
<input type="text" ng-model="f.inputType" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.size}}</span>
<input type="text" ng-model="f.size" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.primary}}</span>
<input type="text" ng-model="f.primary" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.index}}</span>
<input type="text" ng-model="f.index" ng-show="f.editMode"/></td>
<td><button ng-click="deleteField(f)">delete</button></td>
<td><button ng-click="SaveEdits($index)" >saveEdits</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="container" ng-show="currentEntity!=null">
<form ng-show="action=='form'">
<table class="table">
<tr ng-repeat="f in fields">
<td>{{f.fieldName}} :</td>
<td ng-show="f.relation==null"><input type="{{f.inputType}}" ng-model="records[f.id].value"/></td>
<td ng-show="f.relation!=null">
<select ng-model="records[f.id].value" >
<option ng-repeat="v in relations[f.id] track by $index" ng-value="{{v.id}}">
{{v.id}}
</option>
</select>
</td>
</tr>
<tr>
<td>
<button ng-click="saveRecord()">Save</button>
</td>
</tr>
</table>
</form>
</div>
<div class="container" ng-show="currentEntity!=null">
<form ng-show="action=='rows'">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th ng-repeat="f in fields">{{f.fieldName}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in rows track by $index">
<td>{{r['id']}}</td>
<td ng-repeat="f in fields track by f.fieldName">{{r[f.fieldName]}}</td>
</tr>
</tbody>
</table>
</form>
</div>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
And here's my view
You are using this to get the data from the server:
$http.get("/getFields?id="+t.id)
.success(function(data){
$scope.fields=data;
});
Deleting an element from the $scope.fields array won't delete it on the source of the data. If you "delete" something you need to delete it in the server:
$http.delete("/fields", {params: {fieldId: fieldID});
This is just an example, you need to figure out what's the correct url for your api. Also, the way you are doing it is not very RESTful but I take it you are still learning.

AngularJS Sort table columns

I have a table filter whichs show the content according to the user parameters, this is working perfectly but now I want to let the user filter according to each column.
This is the issue:
When you type "User" on the text input (Filter by columns" I want to only display the "User Column", if you type "Start Date" then only displays "Start Date column" I'm wondering if this is possible using filter option or how can I approach to this requirement.
Here's my code:
<div class="col-xs-10 grid-container">
<div class="row form-entry">
<div class="col-xs-3 input-container">
<input type="text" placeholder="Search in Grid" ng-model="searchFills"/>
</div>
<div class="col-xs-3 input-container">
<input type="text" placeholder="Filter by columns" />
</div>
</div>
<div class="col-xs-10 grid-container">
<div class="generic-grid">
<table class="table-bordered grid-table table-hover">
<thead>
<tr>
<th>id</th>
<th>User</th>
<th>Alt User</th>
<th>Creation Date</th>
<th>Start Date</th>
<th>Recieved Date</th>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fill in fills_list | filter:searchFills">
<td>
{{fill.id}}
</td>
<td>
{{fill.user}}
</td>
<td>
{{fill.useralt}}
</td>
<td>
{{fill.creationdate}}
</td>
<td>
{{fill.startdate}}
</td>
<td>
{{fill.recieveddate}}
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can add ng-model="columnFilter" to your input:
<input type="text" placeholder="Filter by columns" `ng-model="columnFilter"` />
Then addng-hide="columnFilter == 'Start Date'" to <td>{{fill.user}}</td>
Add ng-hide="columnFilter == 'User'" to <td>{{fill.startdate}}</td>
And add ng-hide="columnFilter == 'User' || columnFilter == 'Start Date'" to the rest of the <td>'s.
If you want to filter by column, then you need ng-repeat by columns. After that you can use the same filter that you are using for filtering rows
controller.js
controllers.controller("MainController", ["$scope", function($scope) {
return ["$scope", function ($scope) {
$scope.columns = [{
title: "id",
alias: "id"
}, {
title: "User",
alias: "user"
}, {
title: "Alt User",
alias: "useralt"
}, {
title: "Creation Date",
alias: "creationdate"
}, {
title: "Start Date",
alias: "startdate"
}, {
title: "Recieved Date",
alias: "recieveddate"
}];
}]);
template.html
<div ng-controller="MainController">
<div class="col-xs-10 grid-container">
<div class="row form-entry">
<div class="col-xs-3 input-container">
<input type="text" placeholder="Search in Grid" ng-model="searchFills" />
</div>
<div class="col-xs-3 input-container">
<input type="text" placeholder="Filter by columns" ng-model="searchColumn" />
</div>
</div>
<div class="col-xs-10 grid-container">
<div class="generic-grid">
<table class="table-bordered grid-table table-hover">
<thead>
<tr>
<th ng-repeat="column in columns | filter:searchColumn">{{column.title}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fill in fills_list | filter:searchFills">
<td ng-repeat="column in columns | filter:searchColumn">{{fill[column.alias]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
That will filter any column in a table.

Resources