Angular Show Password after click - javascript

I have an inventory page that also contains a password field.
I would like to hide the password when the page is loaded, best would be to have points displayed **** and after click password is shown or a pop up.
JS
var get_cert = function () {
$http.get($scope.url.cert_list).then(
function (response) {
$scope.certs = response.data;
}
);
}
// execute get function
get_cert();
HTML
<div class="panel panel-default">
<table class="table table-striped valign_middle">
<tr class="table_header">
<td>Name</td>
<td>Pass</td>
</tr>
<tr ng-repeat="cert in certs | filter:search | orderBy:['name']">
<td>{{cert.name}}</td>
<td>
<button class="w3-btn w3-black w3-hover-green w3-ripple" ng-click="get_cert()">Show</button>
<span ng-show="get_cert()">{{cert.password}}</span>
</td>
</tr>
</table>

<button ng-show="!cert.showPw" class="w3-btn w3-black w3-hover-green w3-ripple" ng-click="cert.showPw = true">Show</button>
<span ng-show="cert.showPw">{{cert.password}}</span>
You can use ng-click to do cert.showPw = true, which will append a property called showPw (a boolean) to the object. Combined with ng-show, you can easily switch between the two.
This way you'll keep your controller free of any additional logic needed. You may include ng-click on the span which holds the password which will set showPw = false to switch it back to a button.
See my JSFiddle for full example.

Create a input
<input type="password" name="???">
Then you can change its type to "text" with
$("#idOfInout")type = 'text';

Related

Laravel 7 - Update value of checkbox without form or button

I'm stuck with my project, please help...
This is the situation: In my project I have to assign a teacher to give permission to grade students, because a group can have 2 or more teachers, but only one has to have permission to grade, so... I added a column in my table 'teachers' in the database with the name 'grade' of type boolean. And in my view I added a checkbox... How do I change the value of a checkbox without using any form or button to trigger the action and activate the checkbox in the teacher who is going to have permission to grade? And this value should also be updated in the database.
This is my view...
<!--teachers-->
<table class=" table table-sm table-striped table-bordered ">
<thead class="text-white bg-primary">
<tr>
<th>#lang('show.Identifier')</th>
<th>#lang('show.email')</th>
<th>#lang('show.grade')</th>
<th>#lang('show.delete')</th>
</tr>
</thead>
<tbody class="small text-center">
#foreach ($group->teachers as $teacher)
<tr>
<td >{{$teacher->Identifier}} </td>
<td >{{$teacher->email}} </td>
<td>
<input id="active" {{$teacher->grade == 1 ?'checked':''}} type="checkbox" name="grade" value="1">
</td>
<td>
<form method="post" action="{{url('Groups/Disenroll/'.$group->idGroup.'?idTeacher='.$teacher->idTeacher)}}">
{{csrf_field()}}
<button type="submit" class="btn btn-sm btn-outline-danger" > <i class="material-icons small" >call_split</i></button>
</form>
</td>
</tr>
#endforeach
</tbody>
</table>
And this is an image of the table, if it helps...
I think you can use something like JQuery for this.
You can firstly add a class of toggle-class to your checkbox
<input class="active toggle-class" {{$teacher->grade == 1 ?'checked':''}} type="checkbox" name="grade">
And secondly, make sure that you have a way to keep track of who's doing the grades.
Add data-id="{{ $teacher->Identifier}}" on your checkbox
<input data-id="{{ $teacher->Identifier}}" class="active toggle-class" {{$teacher->grade == 1 ?'checked':''}} type="checkbox" name="grade">
In your web.php add a new route
Route::get('/path/to/updateGrader/status', [App\Http\Controllers\MyController::class, 'updateGraderStatus']);
Add the below code to where your checkbox is located
$('.toggle-class').on('change',function(){
let status = $(this).prop('checked') == true ? true : false;
let grader_id = $(this).data('id');
$.ajax({
type:'GET',
dataType:'json',
url:'/path/to/updateGrader/status', // add your earlier created route here
data:{'grade': status, 'grader_id': grader_id},
success: function(data){
console.log('success');
}
});
});
In your Controller, MyController in our case create a new function
public function updateGraderStatus(Request $request)
{
$grader = MyModel::find($request->grader_id);
$grader->grade = $request->grade;
$grader->save();
}
Please let me know if this helps you. I didn't test it out but I think this is how you would go about it.

Issues with un-hiding table after controller action returns model

I have a hidden table, that is being filled by a controller action returning a model. I have been trying to use the same method I have previously to un-hide the table (via JS toggle) however, once the button is clicked, table becomes visible for a brief second, but as soon as the controller action returns the model, the table is hidden again. Below is my code:
HTML:
form with btn
#using (Html.BeginForm(null, null, FormMethod.Post, new { id = "submitForm"}))
{
<div class="row">
#*<input type="text" name="CasinoID" placeholder="Enter Casino ID" id="cIdSearch" />*#
<div>
Casino: #Html.DropDownList("CasinoID", Model.TerminalReceiptPostData.CasinoIdDDL, "Select Casino", new { id = "cIdSearch", #class = "custom-class-for-dropdown card" })
</div>
<div>
Date: <input id="datepicker" class="datepicker-base card" name="Date" placeholder="MM/DD/YYY" type="text"/>
</div>
<div>
<button type="submit" class="btn btn-sm btn-primary" id="search" onclick="toggleTable()"> Search Transactions</button>
</div>
</div>
}
hidden table:
<hr />
<div class="row hidden" id="ReceiptsMainDiv">
<div class="col-md-12" style="overflow-y:scroll">
<table class="table table-striped table-hover table-bordered" id="terminalReceipts">
<thead>
<tr>
<th>Terminal ID</th>
<th>Local Transaction Time</th>
<th>Amount</th>
<th>Receipt</th>
<td class="hidden"></td>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TransactionsTests)
{
<tr id="#String.Concat("rowIndex", Model.TransactionsTests.IndexOf(item))">
<td>#item.TerminalID</td>
<td>#item.TransactionTime</td>
<td>#item.Amount</td>
#*<td>#Html.ActionLink("View Receipt", "ViewReceipt", new { id = item.Id }, new { #class = "btn btn-primary btn-sm" }) <br /></td>*#
<td class="transactionID hidden">#item.Id</td>
<td>
#if (item.ReceiptData == null)
{
<button class="btn btn-sm btn-primary viewReceipt" disabled>View Receipt</button>
}
else
{
<button class="btn btn-sm btn-primary viewReceipt" data-rowindex="#String.Concat("rowIndex", Model.TransactionsTests.IndexOf(item))">View Receipt</button>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
Controller Action:
[HttpPost]
public ActionResult Index(string CasinoID, DateTime Date)
{
//var id = Int32.Parse(Request.Form["CasinoID"].ToString());
var Cid = Request.Form["CasinoID"];
Cid = GetNumbers(Cid);
var id = Int32.Parse(Cid);
var model = TRBL.GetTransactionTestsData(id, Date);
model.TerminalReceiptPostData = TRBL.GetCasinosDDL();
return View(model);
}
JS:
function toggleTable() {
$("#ReceiptsMainDiv").toggle();
}
What's a better way to get around this?? Thank you!
The Problem
It looks like what is happening is, you are hiding the div container for the table by default, and you are attempting to show the table when the "Search Transactions" button is clicked.
The problem is clicking that button, since it is your form's "submit" button, will refresh the page. This would mean your toggle code won't be called after the page refreshes. (It will be called before the page refreshes, which is why you briefly see the result).
Assuming that you are looking to hide the table unless there is something in it (e.g., hide table only when there is no data loaded), then you have a couple of options, one of which I will suggest below.
Suggested Solution
Remove your "onClick" from the submit/"Search Transactions" button
Remove your function that onClick calls
Place javascript that activates when the page is loaded
Toggle the div (
$("#ReceiptsMainDiv").toggle(); ) to "unhide" it only if data exists within the table, within the document load javascript function.
Since I don't have the model class I wouldn't be able to tell you how you would determine whether or not there is data, but:
If the model is a single set of values (say, a single "transaction"), then you probably have an Id field
Look for that Id field to be something other than its default value. If it is an int, checking for Id > 0 should be sufficient.
If the model is a collection of "transactions", look for the Count > 0 on the collection itself.
Hope this helps!

How to save all rows of a dynamic table in AngularJS?

I am trying to add the rows dynamically for one of the variables which is of type String array in my db. But it only saves the last value entered in the row rather than saving all of them in an array. Below is my view code:
<div class="row" ng-class='{red:true}'>
<label for="remedy">Remedy</label>
</div>
<input name="remedy" id="remedy" ng-model="error.remedy" required>
<br/>
<div class="row" ng-class='{red:true}'>
<a href="#!/errorcreate" class="btn btn-primary btn-small" ng-click="addRemedyRow()" ng-class='{red:true}'>Add Row</a></div>
<br/>
<table style="width:100%">
<thead>
<tr>
<th ng-class='{red:true}'>Remedy</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rowContent in remedyrows">
<td>{{rowContent.remedy}}</td>
</tr>
</tbody>
</table>
{{error.remedy}}
<button type="submit" class="btn btn-default">Create</button>
Cancel
And this is the code in javascript:
$scope.remedyrows = [];
$scope.addRemedyRow = function() {
$scope.remedyrows.push({
remedy: $scope.error.remedy
});
Below is the output I am receiving (in a screenshot):
I added dsdfg as second row and my final error.remedy value just shows dsdfg rather than showing an array of both values : [wdssdsd,dsdfg]. error is the main document of which remedy is one of the fields of type String array.
Any ideas on how to achieve this?
Instead of error.remedy, which is used as holder for future remedyrow, use intermediate variable output for displaying results and sending them to the server:
Javascript:
$scope.output = $scope.remedyrows.map(function(x) { return x.remedy; });
$http({data: $scope.output, method: 'POST', url: url});
HTML:
{{output | json}}
you could have achieved it by following way:
$scope.remedyrows = [];
$scope.output;
$scope.addRemedyRow = function() {
$scope.remedyrows.push({
remedy: $scope.error.remedy
});
$scope.output = $scope.remedyrows.toString();
}
and in html
{{output}}

Segmenting multiple elements to hide/show with Angular

I have built a semi-custom DataGrid based on a table with fields that auto-populate based on a Service call, An intended behavior in the DataGrid is the ability for the user to revise an entry in the system (in this case, Documents) so that the user can select an action and "Replace" the file, and its File Type. The actual markup looks like this:
<form action="#" method="post" ng-model="OtherDocumentsForm" style="margin-top: 15px;">
<h3 style="margin: 0;">Additional Documents</h3>
<table>
<tr>
<th>File Type</th>
<th>File Name</th>
<th>Date</th>
</tr>
<tr ng-repeat="record in DocumentsOther track by $index" id="row-{{record.file_url}}">
<td>
<span data-document-type="{{record.file_type}}" data-document-id='{{record.document_id}}'>{{record.file_type}}</span>
<select ng-model="newDocumentType" id="replace-file-doctype-{{record.document_id}}" placeholder="Choose file Type" ng-show="$scope.replaceFile" data-document-id="{{record.document_id}}" class="replaceComboBox"> <!-- Note replaceFile -->
<option label="" value="" selected="selected"></option>
<option label="PDF" value="pdf">PDF</option>
<option label="Image" value="image">Image</option>
</select>
</td>
<td>
<div ng-if="record">
{{record.document_name}}
<!-- Replace Action-->
<button class="replaceAssociatedRecord" ng-click="ClearAssociatedFile($event, this, '{{record.file_url}}', '{{record.document_id}}');" data-document-type="{{record.file_type_raw}}">Replace</button>
<input type="file" ng-model="replaceFileField" id="replace-file-{{record.document_id}}" data-document-id="{{record.document_id}}" data-document-type="{{record.file_type_raw}}" onclick="checkIfAssocFileDefined(this);" ng-show="replaceFile" class="replaceFileField" /> <!-- Note replaceFile -->
</div>
</td>
<td>
{{record.date_created | dateConsistent}}
</td>
</tr>
</table>
<button ng-click="addUncategorizedFile($event)" style="margin: 5px auto 15px; display: block;">Upload additional file</button>
</form>
As you can probably see, one of the issues that is present is that $scope.replaceFile is called across the board. This value gets set to true when $scope.ClearAssociatedFile() (code below) is called in the replace action, so every field gets unhidden. This was a serious oversight on my end and I am wondering, what would be the best approach to re-implement the components here so that I can split off replaceFile (tied to ng-show, and uninitalized inside the parent controller) so its independent enough to where it can be altered once the event of ClearAssociatedFile is selected?
$scope.ClearAssociatedFile = function(event, elem, parentClassName, inheritDocumentId) {
event.preventDefault();
event.stopPropagation();
//TODO reconfigure to use event
//document.getElementById("row-"+parentClassName).children[0].children[0].innerHTML = "";
event.currentTarget.parentElement.parentElement.parentElement.children[0].children[0].innerHTML = "";
//event.currentTarget.parentElement.parentElement.parentElement.children[0].children[1].style.display = "inline-block"
//document.getElementById("row-"+parentClassName).children[1].children[0].children[0].innerHTML = "";
event.currentTarget.parentElement.parentElement.parentElement.children[1].children[0].children[0].innerHTML = "";
//document.getElementById("row-"+parentClassName).children[1].children[0].children[1].style.display = "none";
event.currentTarget.parentElement.parentElement.parentElement.children[1].children[0].children[1].style.display = "none";
//event.currentTarget.parentElement.parentElement.parentElement.children[1].children[0].children[2].style.display = "inline-block";
//Revise the File Type field to its default.
document.getElementById("replace-file-doctype-"+inheritDocumentId).value = event.target.attributes[2].value;
//Show existing fields
//eval($scope.replaceFile+inheritDocumentId = true);
var replaceFileKey = "replaceFileItem"+$filter('convert_dashes')(inheritDocumentId);
$scope[replaceFileKey] = true;
};
In your controller, declare the following variable
$scope.replaceFileKeys = {};
Replace the last 2 lines in the ClearAssociatedFile function with the following
var replaceFileKey = inheritDocumentId;
$scope.replaceFileKeys[replaceFileKey] = true;
Update ng-show as follows
ng-show="$scope.replaceFileKeys[record.document_id]"
With the above change, only the item that you interact with is hidden. Let me now if you have questions about the change.

Working with a form inside an Angular UI Bootstrap popover?

I have a button that pops up an Angular UI Bootstrap popover, using a template.
You can view it in this pen
The popover template is a form with a table containing a series of text fields with ng-models:
<script type="text/ng-template" id="filterPopoverTemplate.html">
<div class="filters">
<form>
<table>
<tbody>
<tr>
<td><input type="text" size="5" ng-model="filterHsCodeRestricted"></td>
<td>HS Code Restricted</td>
</tr>
<tr>
<td><input type="text" size="5" ng-model="filterHsCode10"></td>
<td>HS Code 10</td>
</tr>
<tr>
<td><input type="text" size="5" ng-model="filterCOD"></td>
<td>COD</td>
</tr>
</tbody>
</table>
<div class="filter-buttons">
<button tabindex="0" class="btn btn-default btn-xs" ng-click="applyFilters()">Apply</button>
<button class="btn btn-default btn-xs" ng-click="resetFilters()">Reset</button>
</div>
</form>
</div>
</script>
I have a "reset" button which calls a function that I want to reset all the ng-models to empty strings:
$scope.resetFilters = function () {
$scope.filterHsCodeRestricted = '';
$scope.filterHsCode10 = '';
$scope.filterCOD = '';
};
However, if I type something into the field and click "reset", the model is not being set to the empty string. I've done this elsewhere and it works, just not inside a popover template, so I assume it has something to do with the fields being in a popover ng-template. How do I "access" those?
The problem is that you're using the model without the DotRule or controller-as-syntax.
The whole problem was already explained by Pankaj Parkar in this question.
So, to make it work, you have to create a new object, ex:
$scope.model = {};
Then, build your ng-model's like this:
ng-model="model.filterCOD"
And so on..
The problem with your code is :
You need to define another ng-controller inside your filterPopoverTemplate.html
app.controller('poptemp', function($scope) {
$scope.resetFilters = function() {
$scope.filterHsCodeRestricted = '';
$scope.filterHsCode10 = '';
$scope.filterCOD = '';
$scope.filterPOE = '';
$scope.filterECCN = '';
$scope.filterItemCondition = '';
};
});
Check the corrected code here

Categories