Creating a drop-down menu with angular js - angularjs

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>

Related

Smart table reset / refresh on input field search does not load the original data

When refreshing the table data with search input field, it displays table data with the last search input field value.
How can I remove the filter on the click of the refresh/clear button and get the original data?
Please find the page view GUI
$scope.Refresh = function () {
$scope.searchall="";
$scope.DataLoad();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<button type="button" class="btn-sm btn-default" ng-click="Refresh()">Refresh</button>
<div>
<select autocomplete="off" style="width: 60px;" ng-model="CountPerPage"
ng- options="x for x in CountPerPageOptionValues">
<option value="">All</option>
</select>
</div>
<table ng-show="DataLoaded" st-table="Collection" class="table table-striped animate-show" st-safe-src="data" >
<thead>
<tr>
<th st-sort="Id">ID</th>
<th st-sort="Name">Name</th>
<th st-sort="Timestamp" style="min-width:68px;">Timestamp</th>
<th st-sort="Message" style="min-width:136px;">Message</th>
</tr>
<tr>
<th>
<input ng-model="searchall" ng-show="!nomsg" st-search="Name" placeholder="search for Name" class="input-sm form-control" style="width:140px" type="search" />
</th>
</tr>
</thead>
<tbody data-ng-hide="isLoading" data-ng-animate="'fade'">
*emphasized text*<tr ng-repeat="latestData in Collection">
<td>{{latestData .Id}}</td>
<td>{{latestData .Name}}</td>
<td>{{latestData .Timestamp | date:'dd MMM yyyy hh:mm:ss a'}}</td>
<td>
{{latestData.Message}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="CountPerPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>

How can data be filtered in a html table with filter in each column separately using Angular JS?

I want to use some text box in a dropdown or so beside each column header for text input for searching in that particular column as in for ID or Name.
<div>
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr ng-repeat="item in data">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>

use filter like this
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<th>
<select ng-model="selectVal" >
<option value="id"> id</option>
<option value="name"> name</option>
</select>
</th>
<th><input ng-model="search[selectVal]" /></th>
</tr>
<tr ng-repeat="item in data | filter : search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.data = [{id:1,name:'sss'},{id:2,name:'aaa'}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<th>
<select ng-model="selectVal" >
<option value="id"> id</option>
<option value="name"> name</option>
</select>
</th>
<th><input ng-model="search[selectVal]" /></th>
</tr>
<tr ng-repeat="item in data | filter : search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>

It's simple, you just have to add a input for each column, like this:
<table class="table">
<tbody>
<tr>
<th>
<p>ID</p>
<input ng-model="search.id" />
</th>
<th>
<p>Name</p>
<input ng-model="search.name" />
</th>
</tr>
<tr ng-repeat="item in data | filter:search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
Take a look in this example and this answer

Dynamically change the value of a textbox on clicking of its corresponding checkbox in ng-repeat in Angularjs

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

Why am i getting this error: Object of class stdClass could not be converted to int?

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. :)

AngularJS Change UI not reflected in $scope for Firefox

I'm using Firefox-42.0 and AngularJS v1.4.7.
HTML :
<div class="modal-body">
<p>Select user to share with from the list below.</p>
<div class="form-group">
<label for="">Search:</label>
<input type="text" class="form-control" ng-model="SharedSearchKey" ng-model-options="{ debounce: 600 }" />
</div>
<div class="modal-table" ng-show="usersToShare && usersToShare.length">
<table class="table table-striped table-responsive table-condensed">
<thead>
<tr>
<th>Name</th>
<th>User Name</th>
<th>View Only Tasks</th>
<th>Permission</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in usersToShare">
<td ng-bind="row.ContactName"></td>
<td ng-bind="row.UserName"></td>
<td>
<input type="checkbox" ng-model="row.TaskAssign" ng-init="row.TaskAssign=true" />
</td>
<td>
<select ng-model="row.permission" ng-init="row.permission='1'">
<option value="1">Readonly</option>
<option value="2">Write</option>
</select>
</td>
<td>
<input type="checkbox" ng-model="row.selected" ng-click="toggleSelectThisUser(row)" />
</td>
</tr>
</tbody>
</table>
</div>
JS in Controller :
$scope.toggleSelectThisUser = function (user) {
console.log(user);
};
When i change dropdown and click checkBox, it doesn't reflect in $scope. $scope contains the initial value. This problem occurs in Firefox. But it works fine in google chrome.

Resources