How can I click on an HTML row then show the values of the row in input texts to able the user to edit them.
in controller :
$scope.data = [];
$scope.selectedMember = { Code: "", Latin: "", Local: "" }; //new property
$scope.showInEdit = function (member)
{
$scope.selectedMember = member;
}
in ng-repeat :
<table border="1" ng-hide="Hide">
<thead>
<tr>
<th>Code</th>
<th>Latin Description</th>
<th>Local Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in Contracts | filter:Code | filter:Latin | filter:Local track by $index">
<td>{{c.Staff_Type_Code}}</td>
<td>{{c.L_Desc}}</td>
<td>{{c.A_Desc}}</td>
<!--<td><input type="button" value="Edit" ng-click="Edit(c)"/> </td>-->
</tr>
</tbody>
</table>
In HTML :
<table>
<tr>
<td>Code</td>
<td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" autofocus ng-model="selectedMember.Code.Staff_Type_Code"></td>
</tr>
<tr>
<td>Latin Description</td>
<td><input type="text" size="35" ng-model="Latin.L_Desc"></td>
</tr>
<tr>
<td>Local Description</td>
<td><input type="text" size="35" ng-model="Local.A_Desc"></td>
</tr>
Thanks lot
You just need to update your scope variables in function like
$scope.Latin.L_Desc = c.example;
After that you'll see these values in input fields.
If you want to show values in this code
<table>
<tr>
<td>Code</td>
<td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" autofocus ng-model="selectedMember.Code.Staff_Type_Code"></td>
</tr>
<tr>
<td>Latin Description</td>
<td><input type="text" size="35" ng-model="Latin.L_Desc"></td>
</tr>
<tr>
<td>Local Description</td>
<td><input type="text" size="35" ng-model="Local.A_Desc"></td>
</tr>
Then your object must be like this :
$scope.selectedMember = { Code: "", Latin: {A_Desc:""}, Local: {L_Desc:""} };
And in controller function
$scope.showInEdit = function (member)
{
$scope.selectedMember.Latin.L_Desc = member;
}
This question might sound very basic to many of you, but please pardon me as I am newbie to angularjs.
Basically what I am trying to do is changing the value of a corresponding textbox on click to its corresponding checkbox.
Here is My Markup Code:
<table class="table table-bordered">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Phone</th>
<th>No. Of Chits</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in UnassignedMembers ">
<td>
<input type="checkbox" ng-model="entity.isChecked" ng-change="selectEntity(entity)">
</td>
<td>{{ entity.Name}}</td>
<td>{{ entity.PhoneNo}}</td>
<td>
<input type="number" min="1" ng-model="entity.Count">
</td>
</tr>
</tbody>
</table>
I want to assign a value of "1" to the entity. Count on check of entity.isChecked.
You just have to assign valaue to entity.Count like following
$scope.selectEntity = function(entity){
if(entity.isChecked){
entity.Count = 1;
}else{
entity.Count = 0; // or null
}
};
<tr ng-repeat="entity in UnassignedMembers " >
<td><input type="checkbox" ng-model="entity.isChecked" ng-change="selectEntity(entity)"></td>
<td>{{ entity.Name}}</td>
<td>{{ entity.PhoneNo}}</td>
<td><input type="number" min="1" ng-model="entity.Count"></td>
</tr>
You can achieve it even without the function in controller,
HEre is the code.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<table>
<tr>
<td><input type="checkbox" ng-model="entity.isChecked" ng-change="selectEntity(entity);entity.Count = entity.isChecked ? 1 : ''"></td>
<td>{{ entity.Name}}</td>
<td>{{ entity.PhoneNo}}</td>
<td><input type="number" min="1" ng-model="entity.Count"></td>
</tr>
</table>
</div>
</body>
</html>
Please run the above Snippet
Please tell me which value to fill in checkbox. So that I can change the code accordingly.
HERE IS A WORKING DEMO
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