I would like to Add and Edit and Delete table list data.
With my knowledge I was able to write the below code for adding a new user and I don't know how to perform the edit and delete operation.
I searched lot in google but did not get proper solution.
Can some one help me please?
index.html:-
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="w3-container">
<h3>Users</h3>
<table class="w3-table w3-bordered w3-striped">
<tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
<td>
<button class="w3-btn w3-ripple" ng-click="editUser()">Edit</button>
</td>
<td>
<button class="w3-btn w3-ripple" ng-click="deleteUser()">Delete</button>
</td>
</tr>
</table>
<br></br>
<h3>Create New User</h3>
<form>
<label>First Name:</label>
<input class="w3-input w3-border" type="text" ng-model="fName" placeholder="First Name">
<br>
<label>Last Name:</label>
<input class="w3-input w3-border" type="text" ng-model="lName" placeholder="Last Name">
<br></br>
<button class="w3-btn w3-green w3-ripple" ng-click="addUser()">Save Changes</button>
</form>
</div>
<script src= "myUsers.js"></script>
</body>
</html>
myUsers:-
angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim', lName:"Pim" },
{id:3, fName:'Sal', lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.addUser=function(){
$scope.users.push({
'fName':users.fName,
'lName':users.lName,
});
}
$scope.editUser=function(){
}
$scope.deleteUser=function(){
}
});
Please check the tutorial from here.
For your reference use following code and check the codepen to here.
In template
<tr ng-repeat="user in users">
<td>
<span ng-if="!user.editFlag">{{ user.fName }}</span>
<input ng-if="user.editFlag" ng-model="user.fName"/>
</td>
<td>
<span ng-if="!user.editFlag">{{ user.fName }}</span>
<input ng-if="user.editFlag" ng-model="user.lName"/>
</td>
<td>
<button class="w3-btn w3-ripple" ng-click="editUser($index)"><span ng-if="!user.editFlag">Edit<span><span ng-if="!user.editFlag">Save</span></button>
</td>
<td>
<button class="w3-btn w3-ripple" ng-click="deleteUser($index)">Delete</button>
</td>
</tr>
In your controller
// edit data
$scope.editUser = function (index) {
if($scope.users.length){
// its checking with your edit flag to save or edit
$scope.users[index].editFlag = !$scope.users[index].editFlag;
}
};
// Delete data
$scope.deleteUser = function (index) {
// Remove from main records (using index)
if($scope.users.length){
$scope.users.splice(index, 1);
}
};
Please check this sample to here.
Hopes this will help you !!
These changes will make addUser functionality work
$scope.addUser=function(index){
if(index){
$scope.users[index].fName=$scope.fName;
$scope.users[index].lName=$scope.lName;
}
else{
$scope.users.push({
'fName':$scope.fName,
'lName':$scope.lName,
});
}
$scope.editMode=false;
$scope.fName='';
$scope.lName='';
}
$scope.editUser=function(index){
$scope.editMode=true;
$scope.editIndex=index;
$scope.fName=$scope.users[index].fName;
$scope.lName=$scope.users[index].lName;
}
$scope.deleteUser=function(index){
$scope.users.splice(index,1)
}
Here is working version of above problem
with changes in html and js code
https://embed.plnkr.co/ecKSDwW2hfU9t7cj4rZP/
Related
I have a form that is rendered inside of an HTML table using AngularJS, similar to:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="inputData" id="inputData" ng-submit="submit()">
<table class="table">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Head Office</th>
</tr>
<tr ng-repeat="company in companies">
<td>
<input type="text" ng-model="company.name" />
</td>
<td>
<input type="text" ng-model="company.employees" />
</td>
<td>
<input type="text" ng-model="company.headoffice" />
</td>
</tr>
</table>
<input type="submit"/>
</form>
</div>
</div>
Users can edit the values in the form. When the form is submitted, I'd like to get the $index of the row(s) that were edited. That way I can access the full row from the model via $scope.companies[$index] (which is going to get POSTed to a server).
I know I can check individual fields for the $dirty property. But is there a way I can retrieve the row number? Or better yet, a way I can retrieve all fields in the edited rows?
Here's a fiddle where, right now, I'm just highlighting the dirty fields using CSS: https://jsfiddle.net/jmg157/kzxeL0yw/2/
Thanks for any and all help!
You can try something like this ( using angular.equals) :
var app = angular.module("myApp", []);
app.controller("MyCtrl", ["$scope", function($scope) {
$scope.companies = [{
name: "Infosys Technologies",
employees: 125000,
headoffice: "Bangalore"
}, {
name: "Cognizant Technologies",
employees: 100000,
headoffice: "Bangalore"
}, {
name: "Wipro",
employees: 115000,
headoffice: "Bangalore"
}];
$scope.orginalCompanies = angular.copy($scope.companies);
$scope.submit = function() {
$scope.changedIndex = [];
if(angular.equals($scope.orginalCompanies, $scope.companies)){
console.log('NOthing is changed');
}else{
angular.forEach($scope.companies, function(value, key) {
if(!angular.equals(value, $scope.orginalCompanies[key])){
$scope.changedIndex.push(key);
}
});
console.log("changed Index:=>");
console.log($scope.changedIndex);
}
}
}]);
input.ng-dirty {
background-color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="inputData" id="inputData" ng-submit="submit()">
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
</tr>
<tr ng-repeat="company in companies">
<td>
<input type="text" ng-model="company.name" />
</td>
<td>
<input type="text" ng-model="company.employees" />
</td>
<td>
<input type="text" ng-model="company.headoffice" />
</td>
</tr>
</table>
<input type="submit"/>
</form>
</div>
</div>
You can simply use ng-change directive:
angular.module("myApp", []).controller("MyCtrl", ["$scope", function($scope) {
$scope.companies = [{
name: "Infosys Technologies",
employees: 125000,
headoffice: "Bangalore"
}, {
name: "Cognizant Technologies",
employees: 100000,
headoffice: "Bangalore"
}, {
name: "Wipro",
employees: 115000,
headoffice: "Bangalore"
}];
$scope.submit = function() {
console.log($scope.inputData);
}
$scope.logs = [];
$scope.logDirty = function(key, $index) {
var message = 'company[' + $index + '].' + key + 'is dirty';
if ($scope.logs.indexOf(message) == -1)
$scope.logs.push(message);
}
}]);
input.ng-dirty {
background-color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="inputData" id="inputData" ng-submit="submit()">
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
</tr>
<tr ng-repeat="company in companies" ng-init='parentIndex=$index'>
<td ng-repeat='(key, val) in company'>
<input ng-change='logDirty(key, parentIndex)' type="text" ng-model="company[key]" />
</td>
</tr>
</table>
<input type="submit" />
<ul ng-if='logs.length > 0'>
<li ng-repeat='log in logs'>{{log}}</li>
</ul>
</form>
</div>
</div>
I am trying to create a single page application using angularjs, MVC and web-API. I am using "ng-repeat" to display all the records in a table, but it is generating blank rows. No of blank rows are equal to the no of records in the database. API is working fine. Also when I print the $scope.Students variable I can see the data in console.
Index page
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/MyScripts/script.js"></script>
<h2>Home Page</h2>
<body ng-app="appModule">
<div>
<br />
Read
Create
Delete
<br />
<ng-view></ng-view>
<br />
</div>
</body>
html for display
<br />
{{message}}
<br /><br />
<table border="1">
<thead>
<tr>
<td>
ID
</td>
<td>
Name
</td>
<td>
City
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="Student in Students">
<td>
{{ Student.StudentID }}
</td>
<td>
{{ Student.Name }}
</td>
<td>
{{ Student.City }}
</td>
<td>
<input type="button" value="Edit" ng-click="" />
</td>
<td>
<input type="button" value="Delete" ng-click="" />
</td>
</tr>
</tbody>
</table>
<br /><br />
{{ errorMessage }}
Angular controller
.controller("DisplayController", function ($scope, appService) {
$scope.message = "Display Page";
getAll();
//method to call angular service
function getAll() {
//service call
var serviceCall = appService.getStudents();
serviceCall.then(function (response) {
//store response data to scope variable
$scope.Students = response.data;
console.log($scope.Students)
},
function (error) {
$scope.errorMessage = error;
})
}
})
View Page
It's case sensitive ,according to your data , it should be,
<td>
{{ Student.studentID }}
</td>
<td>
{{ Student.name }}
</td>
<td>
{{ Student.city }}
</td>
i want to make something like this
angularjs-checkbox
this is my code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head></head>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"ALL",
"KOREAN",
"ENGLISH",
"CHINESE",
"JAPANESE",
"GERMAN",
"FRENCH",
"ITALIAN",
"SPANISH",
"OTHERS",
]
});
</script>
<body class="other_page" ng-app="myApp">
<table class="checkbox_table" ng-controller="myCtrl">
<tr>
<td colspan="3" class="filter_subtitle_td">
<div class="filter_subtitle">
<span>
CATEGORY
</span>
</div>
</td>
</tr>
<tr ng-repeat="x in records" ng-if="$index % 3 == 0">
<td class="checkbox_td">
<input type="checkbox" id="{{records[$index]}}" class="category_filter_checkbox" ng-model="all" />
<label for="{{records[$index]}}" class="checkbox_label">
{{records[$index]}}
</label>
</td>
<td class="checkbox_td" ng-if="x != ''">
<input type="checkbox" id="{{records[$index + 1]}}" class="category_filter_checkbox" ng-checked="all" />
<label for="{{records[$index + 1]}}" class="checkbox_label">
{{records[$index + 1]}}
</label>
</td>
<td class="checkbox_td" ng-if="x != ''">
<input type="checkbox" id="{{records[$index + 2]}}" class="category_filter_checkbox" ng-checked="all" />
<label for="{{records[$index + 2]}}" class="checkbox_label">
{{records[$index + 2]}}
</label>
</td>
</tr>
</table>
</body>
</html>
my questions is:
how to make ng-repeat stop when no data left?
how to give only 'ALL' data ng-model so the other checkbox can be selected by click this 'ALL' checkbox?
Thank you for your help
I think you chose too complicated way.
To simplify you can use lodash.com or underscorejs and split array to chunks as: $scope.records = _.chunk(data, 3);
So output will be:
[[{"type":"ALL","value":false},{"type":"KOREAN","value":false},{"type":"ENGLISH","value":false}],[{"type":"CHINESE","value":false},{"type":"JAPANESE","value":false},{"type":"GERMAN","value":false}],[{"type":"FRENCH","value":false},{"type":"ITALIAN","value":false},{"type":"SPANISH","value":false}],[{"type":"OTHERS","value":false}]]
Further, to make checkboses to work properly with ng-model we need pass not primitive but objects as {type:<NAME>, value:true/false}:
var data = [
{type:"ALL",value:false},
{type:"KOREAN",value:false},
{type: "ENGLISH",value:false},
{type: "CHINESE",value:false},
{type:"JAPANESE",value:false},
{type: "GERMAN",value:false},
{type:"FRENCH",value:false},
{type:"ITALIAN",value:false},
{type:"SPANISH",value:false},
{type:"OTHERS",value:false}
];
$scope.all = angular.copy(data[0]);
$scope.records = _.chunk(data, 3);
So your HTML will look like:
<table class="checkbox_table" ng-controller="myCtrl">
<tr>
<td colspan="3" class="filter_subtitle_td">
<div class="filter_subtitle">
<span>
CATEGORY
</span>
</div>
</td>
</tr>
<tr ng-repeat="record in records" >
<td ng-repeat="x in record" >
<input type="checkbox" ng-model="all.value" ng-if="x.type === 'ALL'" />
<input type="checkbox" ng-model="x.value" ng-checked="all.value" ng-if="x.type !== 'ALL'" />
<label for="{{x.type}}" ng-if="x.type !== 'ALL'" >{{x.type}}</label>
<label for="{{all.type}}" ng-if="x.type === 'ALL'" >{{x.type}}</label>
</td>
</tr>
</table>
Demo Fiddle
Selected value from the drop down should be added when I click on add button, only once the value should be added to the result field. Some once can help me on this. below is code which i tried.
function ContactController($scope) {
$scope.contacts = ["Apple"];
$scope.curItem = [{
id: "1",
items: "Apple"
}, {
id: "2",
items: "Orange"
}, {
id: "3",
items: "Banana"
}, {
id: "4",
items: "Apricot"
}, {
id: "5",
items: "Asparagus"
}, ];
$scope.selectedItem = $scope.curItem[0];
}
View :
<table class="range-table" width="100%">
<tr>
<td>
<input type="hidden">
<button class="btn btn-link" value= "Save">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
<td>
<select required="" style="min-width:180px;"> </select>
</td>
</tr>
</table>
<table class="range-table" width="100%">
<tr>
<td ng-repeat="contact in contacts"> <td>{{ contact }}</td>
</tr>
</table>
HTML:
<body ng-controller="MainCtrl">
<table class="range-table" width="100%">
<tr>
<td><input type="hidden"> <button class="btn btn-link" ng-click="save(selectedItem)">Save</button> </td>
<td><select ng-model="selectedItem" ng-options="i.items as i.items for i in curItem" ng-init="selectedItem=curItem[0].id"></select></td> </tr>
</table>
<table class="range-table" width="100%">
<tr>
<tr ng-repeat="contact in contacts track by $index">
<td>{{ contact }}</td>
</tr>
</table>
</body>
Javascript (your controller code):
app.controller('MainCtrl', function($scope) {
$scope.contacts = ["Apple"];
$scope.curItem=[{id:"1",items:"Apple"}, {id:"2",items:"Orange"}, {id:"3",items:"Banana"}, {id:"4",items:"Apricot"}, {id:"5",items:"Asparagus"}];
$scope.save=function(i){
if ($scope.contacts.indexOf(i) <= -1){
$scope.contacts.push(i);
}
};
});
Here is the working Plunker
Edit: It seems that you want to add value only once. I've edited my answer and plunker.
I have created a plunker
Textbox should be enabled on click of other option radio button is checked
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.$watch('form.Program', function(mVal){
if (angular.isUndefined($scope.form)) return;
if(mVal === 'other'){
$scope.form.OtherProgram = $scope.tmVar;
} else {
if($scope.form.OtherProgram !== null){
$scope.tmVar = $scope.form.OtherProgram;
$scope.form.OtherProgram = null;
}
}
});
});
HTML:
<body ng-controller="MainCtrl">
<p>
Program:
<label><input type="radio" ng-model="form.Program" name="Program" value="option 1" required /> option 1</label>
<label><input type="radio" ng-model="form.Program" name="Program" value="option 2" required /> option 2</label>
<label><input type="radio" ng-model="form.Program" name="Program" value="other" required /> other</label>
<input type="text" ng-model="form.OtherProgram" ng-disabled="form.Program != 'other'" name="Program_Other" ng-required ="form.Program != 'other'"/>
</p>
</body>
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.