I am trying to inject a new angular controller into a drop down menu, which is in a view primarily populated with another module and controller. So far it does not work, and I do not know why, necessarily. I am not using routing or anything like that,
purely calling the controllers and modules in the html.I am not too sure where else to look. Currently, I am injecting ng-app into a div wrapper, with different locations. However, this does not allow the angular controllers and modules to work in unison Here is snippet of my code:
<div ng-show="showme=='4'">
<body>
<div ng-app="app">
<div class="container">
<div ng-controller="ClientCtrl">
<div class="datagrid">
<table>
<thead>
<tr>
<th> Checks/Offers Received </th>
<th> Disbursement </th>
<th> Client Ins Settled Amount </th>
<th> Case Fee Percentage</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</body>
<body>
<div ng-app="offer">
<div class="container">
<div ng-controller="OfferCtrl">
<div class="datagrid">
<table>
<tbody>
<td>
<div class="dropdown">
<button class="dropbtn">Offers</button>
<div class="dropdown-content">
<li ng-repeat="offer in offers | filter:{clientid:clientId}">
<input type="text" value="{{offer.offeramnt}}" />
Offer 2
Offer 3
</li>
</div>
</div>
</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<body>
<div ng-app="check">
<div class="container">
<div ng-controller="CheckCtrl">
<div class="datagrid">
<table>
<tbody>
<td>
<div class="dropdown">
<button class="dropbtn">Checks</button>
<div class="dropdown-content">
<li ng-repeat="check in checks | filter:{clientid:clientId}">
<input type="text" value="{{check.checkamount}}" />
Check 2
Check 3
</li>
</div>
</div>
</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<body>
<div ng-app="app">
<div class="container">
<div ng-controller="ClientCtrl">
<div class="datagrid">
<table>
<tbody>
<tr>
<td>
<input type="string" value=" {{client.checksreceived}}" />
</td>
<td>
<input type="text" value="{{client.clientinssettlesamnt}}" />
</td>
<td>
<input type="number" value="{{client.casefeepercent}}" />
</td>
</tr>
</tbody>
<thead>
<tr>
<th> Adverse Settle Amount </th>
<th> Case cost </th>
<th> Line Item Fees</th>
<th> Loan Information </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in clients | orderBy:'id' | filter:{id:clientId} | limitTo: 1 track by $index" ">
<td>
<input type="numer" value=" {{client.advsettleamnt}}"/>
</td>
<td>
<input type="number " value="{{client.Casecost}} "/>
</td>
<td>
<input type="number " value="{{client.lineitemfees}} "/>
</td>
<td>
<input type="text " value="{{client.bdf}} "/>
</td>
</tr>
</tbody>
</table>
<button type="submit " ng-click="updateClient() "><strong>Update</strong></button>
<a class="btn btn-primary " href="/intakeoffer/{{clientId}} ">
<strong>Add Offer</strong>
</a>
<a class="btn btn-primary " href="/intakecheck/{{clientId}} ">
<strong>Add check</strong>
</a>
</div>
</div>
</div>
In the Angular docs here you can read:
only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
So bootstrapping like you've planned is not working. Also multiple ng-app's with same name won't work and the ng-show (with-out controller and with-out app - not in your markup) is not working because nesting ng-app is not supported.
Manual bootstrapping syntax is like:
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
I wouldn't structure my app like this. Just create one app module where you're adding your other modules as dependencies.
e.g. angular.module('app', ['order'])
I would also recommend to read some tutorials for getting started with AngularJs. For example the PhoneCat tutorial.
Related
I need some help with the following code.
So I have a page like the following one in the example.
So far, I tried the following method. (Please check my code and live example)
With my current method to select the checkboxes, I have to write code for each and every option like this.
$("#check_us, #check_us-1, #check_us-2").prop("checked", !0)
Is there any simpler way to do this? for an example can we just select every one which contains us_, as_, eu part without assigning unique values to every option. Any assistance you can provide would be greatly appreciated.
$("button.select-all").on("click", selectAll);
function selectAll() {
$(".schoolareas").toArray().forEach(function (a, c, b) {
$("#check_" + a.id).prop("checked", !0)
})
}
$("button.unselect-all").on("click", unselectAll);
function unselectAll() {
$(".schoolareas").toArray().forEach(function (a, c, b) {
$("#check_" + a.id).prop("checked", !1)
})
}
$("button.select-us").on("click", selectAmerica);
function selectAmerica() {
unselectAll();
$(".schoolareas").toArray();
$("#check_us, #check_us-1, #check_us-2").prop("checked", !0)
}
$("button.select-eu").on("click", selectEurope);
function selectEurope() {
unselectAll();
$(".schoolareas").toArray();
$("#check_eu, #check_eu-1").prop("checked", !0)
}
$("button.select-as").on("click", selectAsia);
function selectAsia() {
unselectAll();
$(".schoolareas").toArray();
$("#check_as, #check_as-1").prop("checked", !0)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid py-4">
<div class="row text-center">
<div class="col-8 offset-2">
<div class="btn-groups">
<button class="btn btn-primary select-all">Select All</button>
<button class="btn btn-primary unselect-all">Unselect All</button>
<button class="btn btn-primary" id="latencybutton">Count</button>
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Country/Area</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item select-us" type="button">America</button>
<button class="dropdown-item select-eu" type="button">Europe</button>
<button class="dropdown-item select-as" type="button">Asia</button>
</div>
</div>
</div>
</div>
</div>
<div class="container col-8 offset-2">
<div class="table-responsive shadow p-3 mb-5 bg-light rounded text-xs-center">
<table id="grid" class="table table-hover">
<thead class="thead-dark">
<tr>
<th data-type="string">?</th>
<th data-type="string">Locations:</th>
<th data-type="number">Scores:</th>
<th data-type="number">Average:</th>
<th class="thmw" data-type="string">Score Status:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="check_eu" checked />
<label for="check_eu"></label>
</td>
<td>London (EU)</td>
<td class="schoolareas" id="eu"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_eu-1" checked />
<label for="check_eu-1"></label>
</td>
<td>Manchester (EU)</td>
<td class="schoolareas" id="eu-1"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us" checked />
<label for="check_us"></label>
</td>
<td>New York (US)</td>
<td class="schoolareas" id="us"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us-1" checked />
<label for="check_us-1"></label>
</td>
<td>California (US)</td>
<td class="schoolareas" id="us-1"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us-2" checked />
<label for="check_us-2"></label>
</td>
<td>Florida (US)</td>
<td class="schoolareas" id="us-2"></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_as" checked />
<label for="check_as"></label>
</td>
<td>Singapore (AS)</td>
<td class="schoolareas" id="as"></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_as-1" checked />
<label for="check_as-1"></label>
</td>
<td>China (AS)</td>
<td class="schoolareas" id="as-1"></td>
<td class="status"></td>
</tr>
</tbody>
</table>
</div>
</div>
Sure you can! Instead of accessing elements by their IDs (which have to be unique), give them all a common class and grab them by that instead.
So elements that look like this:
<input type="checkbox" id="check_us-1" checked />
<input type="checkbox" id="check_us-2" checked />
Get an additional class prop, like this:
<input type="checkbox" id="check_us-1" class="us" checked />
<input type="checkbox" id="check_us-2" class="us" checked />
Then you can update their props in batch like this:
$(".us").prop("checked", !0)
Without modifying your current HTML you can select all elements wich class contains a string with:
$('checkbox[class^="us"]')
and changed their checkbox value like this:
$('checkbox[class^="us"]').prop("checked", !0)
then change us for whatever word you want.
There are several ways you can do this using either JavaScript or jQuery.
You could use the attribute contains selector to find all elements with an id that matches a pattern:
$('[id*="us_"]').prop('checked', true);
This form of selector also works with JavaScript's native document.querySelector() method.
However, this runs the risk of unintentionally selecting irrelevant elements that happen to match the selector. The selector above would also match an element with an id of "status_code", for example.
A better approach is the one that #jonny suggests in his answer. While the id attribute of every element in a document has to be unique, other attributes like "class" do not. This allows you to assign a css class name to a group of related elements and select them by that class name using the class selector. (Again, this selector also works with the document.querySelector method).
Personally, I dislike using css class names to select related groups of elements because css classes are for styling, not for functionality. So another approach you can use if you want to keep style an function separate is to include data attributes like so:
<input type="checkbox" id="check_us-1" checked data-group="us" />
<input type="checkbox" id="check_us-2" checked data-group="us" />
You can then use the attribute selector to select both inputs:
$('[data-group="us"]').prop('checked', true);
I want to build a pop-up modal edit form to change individual table values in a dynamic grid. Right now, the input fields appear on button click using the function editToggle(i). No more than 4 input fields will ever appear because they are meant to edit the 4 values in my data model. However, the input fields (and values) are being dynamically generated with *ngFor. I need some way to pass/copy those input fields to my modal to edit there instead of on the grid itself (where they currently appear after clicking the edit button).
I have tried to use [(ngModel)] to clone but it does not work. I have tried to pass them using functions but the values return null. Because the HTML only shows one input field (because they are being dynamically created with *ngFor) I do not know of a way to individually pass the values.
<div>
<table align="center">
<tr>
<th>
List of Providers
</th>
</tr>
</table>
<table id="thetable" align="center">
<tr>
<th>Application ID</th>
<th>Client Name</th>
<th>Version</th>
<th>API Key</th>
<th>Protected Secret</th>
<th>EDIT/DELETE</th>
</tr>
<tr ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
<td *ngFor="let col of columns">
<span class="field" *ngIf="i !== index">
{{prov[col]}}
</span>
<span *ngIf="i === index">
<input [(ngModel)]="inputClientName" class="table" value="{{prov[col]}}" (change)="EditItem(i, col, $event.target.value)" type="text" placeholder="{{prov[col]}}">
</span>
<td>
<span *ngIf="editing && i === index">
<button (click)="save()">Save</button>
</span>
<span *ngIf="i !== index">
<button class="edit" name="editButton" (click)="editToggle(i); openEditForm()">/</button>
<button class="delete" (click)="deleteRow(i)">x</button>
</span>
</td>
</tr>
</table>
<!-- The EDITING Modal -->
<div id="editForm" class="modal_edit">
<div class="modal-content_edit">
<span (click)="save()" class="close">×</span>
<h2 style="margin-bottom: 70px">Edit OAuthAppProvider</h2>
<div>
<label style="margin-bottom: 20px">
Client Name:
</label>
<input [(ngModel)]="inputClientName" id="editClientName" type="text">
</div>
<div>
<label style="margin-bottom: 20px">
Version
</label>
<input id="editClientVersion" type="text">
</div>
<div>
<label style="margin-bottom: 20px">
API Key:
</label>
<input id="editClientAPIKey" type="text">
</div>
<div>
<label style="margin-bottom: 20px">
Protected Secret
</label>
<input id="editClientProtectedSecret" type="text">
</div>
<button style="float: right" class="add" (click)="save()">
<h4 style="font-style: bold">Save</h4>
</button>
<button class="cancel" (click)="save()">
<h4 style="font-style: bold">Cancel</h4>
</button>
</div>
</div>
</div>
export const PROVIDERS: any[] =
[
{
AppID: "11",
ClientName: "sampleclientname1",
apiKey: "sampleapikey1",
Version: "1.0",
protectedsecret: "samplesecret1"
},
{
AppID: "12",
ClientName: "sampleclientname2",
apiKey: "sampleapikey2",
Version: "1.0",
protectedsecret: "samplesecret2"
},
{
AppID: "13",
ClientName: "sampleclientname3",
apiKey: "sampleapikey3",
Version: "1.0",
protectedsecret: "samplesecret3"
},
{
AppID: "14",
ClientName: "sampleclientname4",
apiKey: "sampleapikey4",
Version: "1.0",
protectedsecret: "samplesecret4"
}
]
You can set a variable named something like selectedRowData and set the provider as its value when the user clicks the edit button. The value attribute of the inputs on the modal can be set to the properties of the selected row. It's difficult to tell what the functionality of the other methods is supposed to be without the component code so I made some assumptions. Let me know if you have any other questions about it.
Here's a link to a StackBlitz.
EDIT
The data is only being bound one way via the [value] attribute and there isn't a form object keeping track of all the changes like there would be using Reactive Forms so a model should be created first.
I commented out the original solution and added updates below. The selectedRowData variable is instantiated with a provider object with empty properties. The modal has been updated to use two-way binding with [(ngModel)]. The StackBlitz has also been updated.
The table is updated as the user types their edits into the form. The save button doesn't need to be used unless the data needs to be persisted somewhere.
Check out the Angular Forms Documentation it should help with how to pass form data around between components. What you've created here is similar to Template-driven Forms.
Component
// selectedRowData = null;
selectedRowData = {
AppID: "",
ClientName: "",
apiKey: "",
Version: "",
protectedsecret: ""
};
editToggle(rowData) {
this.selectedRowData = rowData;
}
Table
<div>
<table align="center">
<tr>
<th>
List of Providers
</th>
</tr>
</table>
<table id="thetable" align="center">
<tr>
<th>Application ID</th>
<th>Client Name</th>
<th>Version</th>
<th>API Key</th>
<th>Protected Secret</th>
<th>EDIT/DELETE</th>
</tr>
<tr ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
<td *ngFor="let col of columns">
<span class="field" *ngIf="i !== index">
{{prov[col]}}
</span>
<span *ngIf="i === index">
<input [(ngModel)]="inputClientName" class="table" value="{{prov[col]}}"
(change)="EditItem(value)" type="text" placeholder="{{prov[col]}}">
</span>
<td>
<span *ngIf="editing && i === index">
<button (click)="save()">Save</button>
</span>
<span *ngIf="i !== index">
<button class="edit" name="editButton" (click)="editToggle(prov); openEditForm()">/</button>
<button class="delete" (click)="deleteRow(i)">x</button>
</span>
</td>
</tr>
</table>
Modal
<!-- The EDITING Modal -->
<div id="editForm" class="modal_edit">
<div class="modal-content_edit">
<span (click)="save()" class="close">×</span>
<h2 style="margin-bottom: 70px">Edit OAuthAppProvider</h2>
<div>
<label style="margin-bottom: 20px">
Client Name:
</label>
<!-- <input id="editClientName" type="text" [value]="selectedRowData?.ClientName"> -->
<input id="editClientName" type="text" [(ngModel)]="selectedRowData.ClientName">
</div>
<div>
<label style="margin-bottom: 20px">
Version
</label>
<!-- <input id="editClientVersion" type="text" [value]="selectedRowData?.Version"> -->
<input id="editClientVersion" type="text" [(ngModel)]="selectedRowData.Version">
</div>
</div>
<div>
<label style="margin-bottom: 20px">
API Key:
</label>
<!-- <input id="editClientAPIKey" type="text" [value]="selectedRowData?.apiKey"> -->
<input id="editClientAPIKey" type="text" [(ngModel)]="selectedRowData.apiKey">
</div>
<div>
<label style="margin-bottom: 20px">
Protected Secret
</label>
<!-- <input id="editClientProtectedSecret" type="text" [value]="selectedRowData?.protectedsecret"> -->
<input id="editClientProtectedSecret" type="text" [(ngModel)]="selectedRowData.protectedsecret">
</div>
<button style="float: right" class="add" (click)="save()">
<h4 style="font-style: bold">Save</h4>
</button>
<button class="cancel" (click)="save()">
<h4 style="font-style: bold">Cancel</h4>
</button>
</div>
</div>
</div>
I have looked everywhere and I didn't found really good answer.
I am generating local html page with python and I want to read data from form over there, use this as input for python script and display return from there properly.
f = open('testapi.html','w')
message = """
<html>
<head>
<title></title>
<link rel="stylesheet" href="Bootstrap/bootstrap-3.3.5-dist/css/bootstrap.css" type="text/css"/>
<script>
</script>
</head>
<body>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-3">
<p>Search for best deals</p>
<form name="deals" action="">
<table>
<thead></thead>
<tbody>
<tr> <th>Title </th> <th><input type="text" id="Title" value=""><br></th> </tr>
<tr> <th>Lowest price</th> <th><input type="text" id="LowerPrice" value=""><br></th> </tr>
<tr> <th>Highest price</th> <th><input type="text" id="UpperPrice" value=""><br></th> </tr>
<tr> <th>Sale only</th> <th><input type="checkbox" id="OnSale" value=""></br></th> </tr>
</tbody>
</table>
<p>Sort by:</p>
<input type="radio" name="sort" id="DealRating" value="a">Deal rating<br>
<input type="radio" name="sort" id="Title" value="b">Title<br>
<input type="radio" name="sort" id="Price" value="c">Price<br>
<input type="radio" name="sort" id="Release" value="d">Release<br>
<input type="button" name="Sumbit" value="Submit" onClick="">
</form>
<p> Note: all fields are optional, fill only what you are intrested in.</p>
</div>
<div class="col-md-2">
<p> OR </p>
</div>
<div class="col-md-3">
<p>Search for your favourite games<p>
<form name="games" action="">
<table>
<thead></thead>
<tbody>
<tr><th>Title</th> <th><input type="text" id="GameTitle" value=""></br></th></tr>
</tbody>
</table>
<input type="button" name="Sumbit" value="Submit" onClick="">
</form>
<p> Note: all fields are optional, fill only what you are intrested in.</p>
</div>
<div class="col-md-2">
</div>
</div>
</body>
</html>
"""
f.write(message)
f.close()
my question now is: how I can use that form input to process it in api search and then return result back on this page?
OR
eventually: how to runnpython script from my page and just display results?
Note: I have to use python for this. This is requirement for my project.
It looks like you're looking for something like a CGI script in python. Python has some support for this in the standard library.
There are a lot of tutorials that explain that in detail how to do that exactly.
You could also use mod_python, which is an extension for the Apache web server to run and parse python scripts.
I have a form in Angular setup like the following.
Users can make changes and submit one at a time and it works as expected but I'd like to add a "Submit All" that would submit each item one at a time as though the user were pressing the submit button for each. Im a little stumped on the best way to do this. As of right now I cannot submit them as a batch due to API constraints. I would also like to keep jQuery out of the equation.
My first thought is to create a new object that contains the info for each item and then loop over it and submit that way. I am unsure how to set this up in my controller.
<div class="table-responsive">
<table class="table table-striped">
<thead>
<th>Name</th>
<th></th>
<th>Age</th>
<th>Kids</th>
<th></th>
</thead>
<tbody>
<tr class="pending-item animate-repeat"
data-ng-repeat="user in Users"
data-ng-form="userForm"
role="form"
data-ng-submit="submitUser(user, userDetails)"
novalidate>
<td class="img-container">
<img data-ng-src="{{user['image']['url']}}"
alt="{{user['image']['alt'] || ' '}}"
class="img-responsive" >
</td>
<td class="col-xs-6">
<div class="user-info">
<p class="user-name">
{{user['name']}}
</p>
</div>
</td>
<td>
<div class="input-group input-group-sm">
<span class="input-group-addon">Age</span>
<input type="number" min="0"
name="age"
class="form-control age"
data-ng-init="userDetails.age = user['age']"
data-ng-model="userDetails.age"
required>
</div>
</td>
<td>
<div class="input-group input-group-sm">
<input type="number" min="0" step="1"
name="kids"
class="form-control kids"
data-ng-disabled="user['kids'] === true"
data-ng-pattern="/^\d+$/"
data-ng-init="userDetails.kidsCount = user['kids']['quantity']"
data-ng-model="userDetails.kidsCount"
required>
<div class="input-group-addon"># of kids</div>
</div>
</td>
<td>
<div class="btn-group btn-col">
<button type="submit"
class="btn btn-success btn-sm"
data-ng-disabled="userForm.$invalid || userDetails.working"
data-ng-click="submitUser(user, userDetails)">
Submit
</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<button ng-click="submitAllUsers()">Submit All Users</button>
</div>
Yes, create a object in your controller, say $scope.formData={}, and then bind it with your elements using ng-model or data-ng-model and then on button click pass this object in your controller and do the required stuff.
<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
How can i use jQuery/Javacript to find link with "abc" inside #name div of #posts table.
and after locating it (the link with abc). jQuery will add html content to #post-content #load div of that table that has link with "abc" inside ,using the html(); function in jQuery.
that means after adding my code will look like this :
<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
Some stuff is added here using html()
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
while the #name with no link with "abc" which is the link with "user2" will not be affected or modifeid.
How can i do this?
I hope you understand.
Assuming you fix the html and use classes:
$('.name a[href*="abc"]').closest('tr').find('.load').html('Some stuff is added here using html()');
Find a tag with href containing 'abc'
Get parent tr
Find #postcontent >#load within this element
var x = $('a[href*="abc"]');
var b = x.parents('tr');
var c = b.find('#post-content > #load');
alert(c.html());