I want to get a drop down lsit of various operating systems for the user to select. This is my code so far
<form id="main">
<table>
<tr>
<td class="display_bold"><label for="name">VM Name:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="virMachine.vmName" size="40"></td>
</tr>
<tr>
<td class="display_bold" ><label for="name">OS Type:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="virMachine.osVersion" size="40"></td>
</tr>
</table>
This is the OS list i want to create a drop-down menu out of.
$scope.operatingsystems = ["Ubuntu-16", "Centos 7", "Wimdows"];
How do I do it? I know I might have change the input type from text to something else but not sure what.
Just you can do this,
<select ng-model="osType">
<option ng-repeat="os in operatingsystems">{{os }}</option>
</select>
DEMO
angular.module('myApp',[]).controller('studentController', function($scope){
$scope.operatingsystems = ["Ubuntu-16", "Centos 7", "Wimdows"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="studentController">
<table>
<tr>
<td class="display_bold"><label for="name">VM Name:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="virMachine.vmName" size="40"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">OS Type:</label></td>
</tr>
<tr>
<td class="display"><select ng-model="osType">
<option ng-repeat="os in operatingsystems">{{os }}</option>
</select></td>
</tr>
</table>
</div>
</body>
A dropdown in Angular.js could look something like this:
<select ng-model="osType">
<option value=" ">Choose OS</option>
<option ng-repeat="o in operatingsystems">{{o}}</option>
</select>
I am getting an error message which i attached a pic of, everything is working fine except the "attendance" part which is not showing in the view, i do not know what the problem is, i sure its something simple i am just not seeing it, please let me know where i am going wrong. Thank you.
error message
public function edit_data()
{
$show = $_POST['id'];
$query = $this->db->query("SELECT * FROM participants_info WHERE participant_id=$show");
$query2 = $this->db->query("SELECT * FROM participants_attendance WHERE participant_id=$show");
$query3 = $this->db->query("SELECT * FROM pcs_schedule WHERE participant_id=$show");
$data_view= $query->row();
$data_view2= $query2->row();
$data_view3= $query3->row();
trigger_error("SPECIAL".print_r($data_view, true));
trigger_error("SEVERE".print_r($data_view2, true));
trigger_error("RED".print_r($data_view3, true));
$aggregate_data_view=array('participant_id'=>'',
'First_Name'=>'','Last_Name' =>'','Function'=>'',
'Stlc_id'=>'','Address'=>'','City'=>'','State'=>'',
'Zip_Code'=>'','Phone_Number'=>'','Latitude'=>'','Longitude'=>'',
'Disenrolled'=>'','Deceased'=>'','participant_att_id'=>'','Attendance_Monday'=>'',
'Attendance_Tuesday'=>'','Attendance_Wednesday'=>'','Attendance_Thursday'=>'','Attendance_Friday'=>'',
'Lanyard_Status'=>'','Assistive_Devices'=>'','WheelChair_Van'=>'','TransitVan_240'=>'','TransitVan_360'=>'',
'Subaru_Impreza'=>'','Comments'=>'','pcs_id'=>'','Monday_Pick_Up'=>'','Monday_Drop_Off'=>'','Tuesday_Pick_Up'=>'',
'Tuesday_Drop_Off'=>'','Wednesday_Pick_Up'=>'','Wednesday_Drop_Off'=>'','Thursday_Pick_Up'=>'','Thursday_Drop_Off'=>'',
'Friday_Pick_Up'=>'','Friday_Drop_Off'=>'','Saturday_Pick_Up'=>'','Saturday_Drop_Off'=>'','Sunday_Pick_Up'=>'','Sunday_Drop_Off'=>'','Lanyard_Status'=>'','Assistive_Devices'=>'','WheelChair_Van'=>'','TransitVan_240'=>'','TransitVan_360'=>'','Subaru_Impreza'=>'','Comments'=>''
);
$aggregate_data_view['participant_id']=$data_view->participant_id;
$aggregate_data_view['First_Name']=$data_view->First_Name;
$aggregate_data_view['Last_Name']=$data_view->Last_Name;
$aggregate_data_view['Function']=$data_view->Function;
$aggregate_data_view['Stlc_id']=$data_view->Stlc_id;
$aggregate_data_view['Address']=$data_view->Address;
$aggregate_data_view['City']=$data_view->City;
$aggregate_data_view['State']=$data_view->State;
$aggregate_data_view['Zip_Code']=$data_view->Zip_Code;
$aggregate_data_view['Phone_Number']=$data_view->Phone_Number;
$aggregate_data_view['Latitude']=$data_view->Latitude;
$aggregate_data_view['Longitude']=$data_view->Longitude;
$aggregate_data_view['Disenrolled']=$data_view->Disenrolled;
$aggregate_data_view['Deceased']=$data_view->Deceased;
if($data_view2 > 0)
{
$aggregate_data_view['participant_att_id']=$data_view2->participant_att_id;
$aggregate_data_view['Attendance_Monday']=$data_view2->Attendance_Monday;
$aggregate_data_view['Attendance_Tuesday']=$data_view2->Attendance_Tuesday;
$aggregate_data_view['Attendance_Wednesday']=$data_view2->Attendance_Wednesday;
$aggregate_data_view['Attendance_Thursday']=$data_view2->Attendance_Thursday;
$aggregate_data_view['Attendance_Friday']=$data_view2->Attendance_Friday;
$aggregate_data_view['Lanyard_Status']=$data_view2->Lanyard_Status;
$aggregate_data_view['Assistive_Devices']=$data_view2->Assistive_Devices;
$aggregate_data_view['WheelChair_Van']=$data_view2->WheelChair_Van;
$aggregate_data_view['TransitVan_240']=$data_view2->TransitVan_240;
$aggregate_data_view['TransitVan_360']=$data_view2->TransitVan_360;
$aggregate_data_view['Subaru_Impreza']=$data_view2->Subaru_Impreza;
$aggregate_data_view['Comments']=$data_view2->Comments;
//$aggregate_data_view['participant_id']=$data_view2->participant_id;
}
if($data_view3 > 0)
{
$aggregate_data_view['pcs_id']=$data_view3->pcs_id;
$aggregate_data_view['Monday_Pick_Up']=$data_view3->Monday_Pick_Up;
$aggregate_data_view['Monday_Drop_Off']=$data_view3->Monday_Drop_Off;
$aggregate_data_view['Tuesday_Pick_Up']=$data_view3->Tuesday_Pick_Up;
$aggregate_data_view['Tuesday_Drop_Off']=$data_view3->Tuesday_Drop_Off;
$aggregate_data_view['Wednesday_Pick_Up']=$data_view3->Wednesday_Pick_Up;
$aggregate_data_view['Wednesday_Drop_Off']=$data_view3->Wednesday_Drop_Off;
$aggregate_data_view['Thursday_Pick_Up']=$data_view3->Thursday_Pick_Up;
$aggregate_data_view['Thursday_Drop_Off']=$data_view3->Thursday_Drop_Off;
$aggregate_data_view['Friday_Pick_Up']=$data_view3->Friday_Pick_Up;
$aggregate_data_view['Friday_Drop_Off']=$data_view3->Friday_Drop_Off;
$aggregate_data_view['Saturday_Pick_Up']=$data_view3->Saturday_Pick_Up;
$aggregate_data_view['Saturday_Drop_Off']=$data_view3->Saturday_Drop_Off;
$aggregate_data_view['Sunday_Pick_Up']=$data_view3->Sunday_Pick_Up;
$aggregate_data_view['Sunday_Drop_Off']=$data_view3->Sunday_Drop_Off;
$aggregate_data_view['Lanyard_Status']=$data_view3->Lanyard_Status;
$aggregate_data_view['Assistive_Devices']=$data_view3->Assistive_Devices;
$aggregate_data_view['WheelChair_Van']=$data_view3->WheelChair_Van;
$aggregate_data_view['TransitVan_240']=$data_view3->TransitVan_240;
$aggregate_data_view['TransitVan_360']=$data_view3->TransitVan_360;
$aggregate_data_view['Subaru_Impreza']=$data_view3->Subaru_Impreza;
$aggregate_data_view['Comments']=$data_view3->Comments;
//$aggregate_data_view['participant_id']=$data_view3->participant_id;
}
$data4view['aggregate_data_view']=$aggregate_data_view;
$this->load->helper('url');
$this->load->view('edit_data', $data4view);
}
My View: i have included part that pertains to error only.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<title>
</title>
</head>
<body ng-app="app" ng-controller="decontroller" class="container">
<div id="banner" style="text-align:center; margin-left:auto; margin-right:auto; display:block;">
<img src="http://intranet.gfhs.local/stlc_trans/STLC-Tree-Logo-PACE.png">
</div>
<h2></h2>
<h3>Personal Information:</h3>
<div id="validation-errors">
</div>
<form method="post" accept-charset="utf-8" ng-submit="processRequest()">
<table class="table table-bordered">
<tbody>
<tr>
<td>ParticipantID</td>
<td>{{edit.Stlc_id}}</td>
</tr>
<tr>
<td>First Name:<br>
</td>
<td>{{edit.First_Name}}</td>
</tr>
<tr>
<td>Last Name:<br>
</td>
<td>{{edit.Last_Name}}</td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name ="Address" ng-model="edit.Address" required></td>
</tr>
<tr>
<td>Phone:</td>
<td><input size="20" name ="phone" ng-model="edit.Phone_Number" ></td>
</tr>
<tr>
<td>Assistive Devices:</td>
<td><input name ="Assistive_Devices" ng-model="edit.Assistive_Devices" ></td>
</tr>
<tr>
<td>Lanyard Code</td>
<td>
<input name ="Lanyard_Status" ng-model="edit.Lanyard_Status" /> </td>
</tr>
<tr>
<td>Comments</td>
<td>
<textarea cols="100" name="comments" ng-model="edit.Comments">.</textarea>
</td>
</tr>
<tr>
<td>Disenrolled</td>
<td><input name="disenrolled" type="checkbox" ng-model="edit.Disenrolled" ></td>
</tr>
<tr>
<td>Deceased</td>
<td><input name="deceased" type="checkbox" ng-model="edit.Deceased" ></td>
</tr>
</tbody>
</table>
<h3>Days in Center<br></h3>
<table class="table table-bordered">
<tbody>
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
</tr>
<tr>
<td><input name="Attendance_Monday" type="checkbox" ng-model="edit.Attendance_Monday" ></td>
<td><input name="Attendance_Tuesday" type="checkbox" ng-model="edit.Attendance_Tuesday" ></td>
<td><input name="Attendance_Wednesday" type="checkbox" ng-model="edit.Attendance_Wednesday" ></td>
<td><input name="Attendance_Thursday" type="checkbox" ng-model="edit.Attendance_Thursday" ></td>
<td><input name="Attendance_Friday" type="checkbox" ng-model="edit.Attendance_Friday" ></td>
</tr>
</tbody>
</table>
error message
when you do this $data_view= $query->row();, $data_view becomes an object. you can check that by var_dump($data_view). so you can not use it like if($data_view > 0) because $data_view is not an integer. if you are checking if $data_view contains any data, you can check it like this if(count($data_view) > 0).
that should work. :)
I have created the simple login form and perform the validation on it but the problem is that validation is occur during the page load.My oode here.
<body ng-controller="myCont">
<form name="myForm" novalidate>
<h2 align="center">Add The Item Here</h2>
<table align="center" border="2">
<div class="control-group">
<div class="controls">
<tr>
<td>pid</td>
<td><input type="number" name="pid" ng-model="user.pid" ng-maxlength="3" required="pid" ></td>
<td ng-show="myForm.pid.$touched && myForm.pid.$invalid"></td>
<td ng-show="myForm.pid.$error.required" style="color:red">Enter Pid</td>
<td ng-show="myForm.pid.$error.maxlength" style="color:red">Only 3 digits for pid</td>
</tr>
<tr>
<td>pname</td>
<td><input type="text" name="pname" ng-model="user.pname" required="pname"></td>
<td style="color:red" ng-show="myForm.pname.$touched && myForm.pname.$invalid"></td>
<td ng-show="myForm.pname.$error.required" style="color:red">Pname is required.</td>
</tr>
<tr>
<td>pcost</td>
<td><input type="number" name="pcost" ng-model="user.pcost" required="pcost"></td>
<td style="color:red" ng-show="myForm.pcost.$touched && myForm.pcost.$invalid">
<td ng-show="myForm.pcost.$error.required" style="color:red">Pcost is required.</td>
</tr>
<div ng-repeat="x in result track by $index"></div>
<tr>
<td>AddData<input type="submit" ng-disabled="myForm.$invalid" ng-click="addAll()">
</td>
<td><input type="reset" name="reset" value="reset"></td>
</tr>
</div>
</div>
</table>
</form>
</body>
enter image description here
try angular-toastr for notification of wrong credentials or error message...
Hope it will help out
I am submiting a form using Angular JS and Web service. Here is code-
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="EmpName" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="EmpAge" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="EmpCity" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
I want to make these text boxes reusable on Edit i.e. on edit click corresponding rows item must be filled and the Save button should now be working like Update button.
How can I do it?
Alternatively How can I make row editable?
Ideally you would wanna create the models as
Employee.Name , Employee.Age , Employee.City
Now
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="Employee.Name" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="Employee.Age" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="Employee.City" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="button" id="btnSubmit" ng-click="saveEmployee()">{{Employee.id ? "Edit" : "Create"}}</button>
</td>
</tr>
</table>
In the Controller
$scope.saveEmployee = function(){
if($scope.Employee.id){
// Id will be present for a existing employee
// update the Employee
}else {
// Id not present
// create the employee
}
}
I would have an Employee.save() in the model which can identify weather to save or update the Employee
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.