Hı guys.I have started to learn angular.I made an example that contains 2 page.One of them is main.html.The other one(it is popup) is form.html. When i click the button in main.html page, the popup is opened and user enter some inputs.(lacation and tag).There is a button at the bottom which is called add.What i want to do is when the user click the add button,i want to create a thumbnail in the main.html page.Then user can see location and tag inputs in the thumbnail.
How can i add thumbnails automatically?
form(popup).html
<div ng-show="true">
<label>Location</label>
<br>
<input type="text" gm-places-autocomplete ng-model="vm.autocomplete" class="form-control" style="width:300px;" />
<div ng-show="vm.tags2.length">
<tags-input ng-model="vm.tags2" placeholder="Selected people" on-tag-removed="tagLocRemoved($tag)" style="width:300px;" on-tag-adding="false">
</tags-input>
</div>
<br>
<label>Keywords</label>
<br>
<tags-input on-tag-added="tagAdded($tag)" on-tag-removed="tagRemoved($tag)" ng-model="vm.remove" style="width:300px;"></tags-input>
<div>
<br>
<button type="button" class="btn btn-default" ng-click="vm.clear()">
<span class="glyphicon glyphicon-ban-circle"></span> <span>Cancel</span>
</button>
<button type="button" class="btn btn-default" ng-click="vm.add()">
<span class="glyphicon glyphicon-ban-circle"></span> <span>Add</span>
</button>
</div>
Related
I have an angular application, In that I have created the popover using angular.
.component.html
<div class="col-md-4 ">
<div class="cc button-popover" >
<popover-content #addObjectivePopovers
[animation]="true"
[closeOnClickOutside]="false"
[closeOnMouseOutside]="false" class="vb" *ngIf="!showPopover" >
<form >
<div class="form-group popover-form" >
<label>Enter Custom Trigger Habit: When I</label>
<textarea class="form-control" [(ngModel)]="name" name="name"></textarea>
</div><br>
<div class="form-group popover-form">
<label>Enter Custom Trigger Habit: I will</label>
<textarea class="form-control" #customHabit id="power" maxlength="1500" [(ngModel)]="name2" name="name2"></textarea>
<p class="textarea-count">({{1500 - customHabit.value.length }} of 1500 Characters remaining)</p>
</div>
<div class="popover-btn">
<button class="btn btn-default " (click)="showPopover = false">CANCEL</button>
<button type="button" (click)="save()" >SAVE</button>
</div>
</form>
</popover-content>
</div>
<button [popoverOnHover]="false" type="button" popoverPlacement="bottom" [popover]="addObjectivePopovers" >ADD CUSTOM HABIT</button>
</div>
So when I add some content in textarea and click on the save button I has to close the popup ,and also when we click on the cancel also It should close the popup.
Can anyone help on the same.
Assuming the show boolean flag is separate from the visible state of the popover then add a new boolean flag to your component ts which will be used to manage the visible state of the popover and toggle it with your cancel/save controls:
component ts:
showPopover = false
save() {
this.show = true;
this.showPopover = false;
}
component html:
<div class="form-group popover-form" *ngIf="showPopover">
<textarea class="form-control" id="power" maxlength="1500" [(ngModel)]="name" name="name"></textarea>
</div>
<div>
<button class="btn btn-default cancel-btn" (click)="showPopover = false">CANCEL</button>
<button type="button" (click)="save()">SAVE</button>
</div>
<p *ngIf="show">{{name}}</p>
I am currently having a two page application which lets the user enter the data and hit submit and the next page opens with the Query result in a grid. like below
home.html
<form name="homeForm">
<div class="form-group col-md-6 md-padding">
<div>
<label style="font-size: medium">From Date</label>
<p class="input-group">
<input type="text" class="form-control"
id="fromDate"
name="fromDate"
uib-datepicker-popup="{{format}}"
ng-model="request.fromDate"
is-open="popup1.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<div style="color:maroon" ng-messages="homeForm.fromDate.$error"
ng-if="homeForm.fromDate.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
<div>
<label style="font-size: medium">To Date</label>
<p class="input-group">
<input type="text" class="form-control"
id="toDate"
name="toDate"
uib-datepicker-popup="{{format}}"
ng-model="request.toDate"
is-open="popup2.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<div style="color:maroon" ng-messages="homeForm.toDate.$error"
ng-if="homeForm.toDate.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
<div class="md-padding col-md-6">
<div class="row form-group">
<button type="button" class='btn btn-danger' ng-click="clearRequest(homeForm)">Clear</button>
<!--ng-disabled="!homeForm.$valid" -->
<button type="button" class="btn btn-success" href="Views/Angular/results.html" ng-click="createRequest(homeForm)">Submit</button>
</div>
</div>
</div>
</form>
result.html
<div>
<h4 class="text-primary">Search Results</h4>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular md-mode="indeterminate" ng-show="isLoading" md-diameter="150"></md-progress-circular>
</div>
<div id="gridStyle" ng-if="gridOptions.data"
ui-grid="gridOptions"
class="myGrid"
ui-grid-resize-columns
ui-grid-pagination
ui-grid-selection
ui-grid-auto-resize
ui-grid-cellNav
ui-grid-exporter>
</div>
</div>
Now I am trying to put all the query and the query result together in a page. Like all the inputs/buttons on the left and the grid on the right.
Adding the code in to Plunker here
Do I need to add one more html page that will have both these html, and I should be calling that in the app.js? I am very new to AngularJS not sure how can I do this
Yes, you should create a view component, which will include your two components which will become the child components of the newly added view.
Check out this tutorial to learn the concept.
You can use Asynchronous XHTML And JavaScript (AJAX) to have everything on a single page, without loading a different page, which is what I would do unless you have requirements to display results on a separate page.
Considering you have type=button for the submit button, it appears AJAX was intended since this will prevent the page from reloading when the submit button is clicked.
Basically, in the createRequest() function, send the query parameters (which appear to be included in the homeForm argument) to the query service. When the response is received, update the gridOptions.data with the values you want displayed in the table... Angular should take care of the rest.
i'm working on ACTIVI in AngularJS.
I need to submit forms, so i created it with a submit button. The problem is that each submit button is a bit different (one is for text type form, another for enum type forms) and with new form the previously button is repeated twice.
As you can see this one is ok:
.
But the next form repeat the previously submit button:
This is the code in html
<div ng-controller="githubController3">
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction">
<form ng-submit="submitForm()">
<div ng-repeat="x in names">
{{ x.name }}*
<div ng-if="x.id=='name'">
<input type="text" name="nome" ng-model="formData.properties[0].value" placeholder="{{x.name}}"> {{ value }} </input>
</div>
<div ng-if="x.id=='email'">
<input type="email" name="email" ng-model="formData.properties[1].value" placeholder="{{x.name}}"> {{ email }} </input>
</div>
<div ng-if="x.id=='income'">
<input type="number" name="numero" ng-model="formData.properties[2].value" placeholder="{{x.name}}"> {{ income }} </input>
</div>
</div>
</div>
</form>
<div ng-controller="completeTaskAction">
<form ng-submit="submitForm()">
<br>
<button ng-show="x.type==enum" type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span>Submit!
</button>
</div>
</form>
</div>
</div>
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction2">
<div ng-repeat="x in names">
<div ng-if="x.type=='enum'">
<!--/////////////////////////////////-->
<form ng-submit="submitForm2()">
<select ng-model="formData2.properties[0].value" ng-options="y.id as y.name for y in x.enumValues "></select>
<br>
<button ng-hide="x.type==enum" type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</div>
</div>
</form>
</div>
</div>
I tried (as you can see) with ng-show / hide / ng-if but doesnt work...
The first form is working fine because the button is outside ng-repeat. In the second case the submit button is inside ng-repeat.
I have a section tag that contains a div which consists of a list buttons. I have a hidden div within this button div that I want to slide down under the button clicked which pushes down the rest of the content below it. How would i go about this? I have tried using the CSS position : relative but I don't think I'm using it correctly. Here is my HTML code:
<section style="float: left;" id="querySelection">
<div id="queryButtons">
<input class="btn btn-info net-man" id="zStory11" type="submit"
value="Top 10 Market/Operator/Cell ID combinations" />
<input class="btn btn-info net-man" id="failuresPerDeviceBtn" type="submit"
value="Failures per Device" />
<input class="btn btn-info cust-rep supp-eng net-man" id="failuresPerImsiBtn" type="submit"
value="Failures per IMSI" />
<input class="btn btn-info cust-rep net-man supp-eng" id="st6_CauseCodesPerImsiBtn" type="submit"
value="Failure Cause Codes per IMSI" />
<input class="btn btn-info supp-eng net-man" id="imsisPerFailureClassBtn"
type="submit" value="IMSI's Per Failure Class"/>
<input class="btn btn-info net-man" id="top10ImsiCallFailsTimePeriod" type="submit"
value="Top 10 IMSIs with Call Failures" />
<div id="queryPanel">
</div>
</div>
</section>
How would i go about sliding the "queryPanel" div below the button clicked. Here is the JavaScript used when a button is clicked.
if($('#queryPanel').is(':visible')){
$('#queryPanel').slideToggle("fast");
}
else{
$("#queryPanel").slideToggle("slow");
}
At the moment this slides the "queryPanel" div under the "queryButtons" div which is not the desired result
This is what I came up with:
$(".net-man").click(function(){
var elem = $("#queryPanel");
$("#queryPanel").remove();
elem.insertAfter($(this));
$("#queryPanel").hide().slideToggle("fast");
});
Here is the JSFiddle demo
In my controller i have methods
$scope.openJukeboxesModalToGroup -- open modal popup
$scope.searchJukeboxes --- to search on the page
$scope.keyPressed -- capture the key pressing
In the partial with a form
<form class="form-inline" role="form" ng-submit="deadForm()">
<div class="form-group">
<button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
keyPressed method is
$scope.keyPressed = function($event, eventType) {
$event.stopImmediatePropagation();
if(eventType=='search') {
if($event.which==13) {
$scope.searchJukeboxes();
}
}
};
I am trying to start the search whenever ever somebody types something in the text bar and clicks enter. But i don't somehow the openJukeboxesModalToGroup() method is called too. I have tried to stop this by calling stop event proprpagation, changing name of openJukeboxesModalToGroup() method. But nothing is working. Any help on this.
deadForm() method is impleament and i am not getting any error in chrome console.
Change your button for openJukeBoxesModalToGroup() to this:
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
The issue is you are not providing a type so it is classing the button as a submit in which case openJukeboxesModalToGroup() is being fired from your enter submit event.
When you are hitting enter inside a form it will trigger a submission, I recommend adding your method to the form itself via the ng-submit directive and making your button the submission...
<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
<div class="form-group">
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>