I have this static element
<sp-attachment-button ng-if="::data.canWrite && data.canAttach"
id="disableElements" class="ng-scope">
</sp-attachment-button>
when ng-if condition is true, some sub elements will be added dynamically
<sp-attachment-button ng-if="::data.canWrite && data.canAttach"
id="disableElements" class="ng-scope">
<span class="file-upload-input">
<input type="file" style="display: none" multiple="true"
ng-file-select="data.onFileSelect($files)"
class="sp-attachments-input">
<button title="Add attachment"
ng-click="attachmentHandler.openSelector($event)"
class="panel-button sp-attachment-add btn btn-link"
aria-label="Add attachment" role="button">
<span class="glyphicon glyphicon-paperclip"></span>
</button>
</span>
</sp-attachment-button>
Now I need to disable the button element here.So I tried by adding following options to the <sp-attachment-button> element
1.disabled='disabled'
2.ng-disabled='true'
But it doesn't work.How can I disable the button element?
Any suggestion guys?
Note: I can see only the <sp-attachment-button> element.
If you can add id to that button then here is the solution.
document.getElementsByClass("buttonId").disabled = true;
Related
Im trying to create a button that links to a PDF file open in a new window.
Tried the _blank method but that didn't work.
<button onClick="parent.location='files/sample.pdf'" class="send" >Curriculum vitae</button>
</form>
Code
You can either use an anchor tag and style it
<a class="btn btn-success" href="https://www.google.com" target="_blank">Google</a>
Or you can change your button to
<button title="button title" class="action primary tocart" onclick=" window.open('http://www.google.com', '_blank'); return false;">Google</button>
<button type="button" onclick="window.open('http://www.website.com/page')"> button</button>
I have a form that is used as a filter. This is the code for the date input field.
<label>Date:</label>
<input type="text" id="dateFilter"
ng-model="gridFilters.dateFilter"
placeholder="MM/DD/YYYY"
ng-disabled="loadingData" />
<span class="glyphicon glyphicon-calendar" style="width: 30px"></span>
When the angular controller initializes, the gridFilters.dateFilter value is set to undefined and should not default to anything. This is the correct behavior.
This is the code for my submit button. I'd like for the button to remain disabled until a user selects/enters a valid date.
<button type="button"
class="btn btn-success pull-right"
style="top: -5px; margin-left: 20px"
ng-click="filter()"
ng-enabled="gridFilters.dateFilter!== null && gridFilters.dateFilter!== undefined && Date.parse(gridFilters.dateFilter)"
ng-hide="session.Status !== 0">
Search
</button>
As you can see, I've made multiple attempts at checking the value of the gridFilters.dateFilter value. None of this works. Specifically, when I load the page, my button is enabled as if everything is if a proper date has been entered into the selector. How can I test if the date value is, in fact, a date? Also, this must work in Internet Explorer. I doubt this will make a difference, but IE is our corporate, preferred browser.
You need to use ng-disabled - there is no HTML attribute called enabled.
And try this:
<button type="button"
class="btn btn-success pull-right"
style="top: -5px; margin-left: 20px"
ng-click="filter()"
ng-disabled="gridFilters.dateFilter === null || gridFilters.dateFilter === undefined || Date.parse(gridFilters.dateFilter)"
ng-hide="session.Status !== 0">
Search
</button>
This ng-disabled="gridFilters.dateFilter === null || gridFilters.dateFilter === undefined" is working 100%
But for the Date.parse(gridFilters.dateFilter) I'm not sure if it will work or not.
Another approach is :
<form name="dataForm" novalidate ng-submit="submitForm()">
<input type="date" name="date" class="form-control" required
ng-model="gridFilters.dateFilter">
<button type="submit"
class="btn btn-success pull-right"
style="top: -5px; margin-left: 20px"
ng-click="filter()"
ng-disabled="dataForm.$invalid"
ng-hide="session.Status !== 0">
Search
</button>
</form>
I am pulling data from database into a table.
A fraction of the table code is as below
<tr>
<th>Approved</th>
<th>Edit</th>
</tr>
<tr ng-repeat="x in list">
<td>
<span data-ng-show="!editable">{{x.approved}}</span>
<span data-ng-show="editable">
<select style="" class="form-control" ng-model="x.approved">
<option value="Y">Y</option>
<option value="N">N</option>
</select>
</span>
</td>
<td>
<span type="submit" data-ng-hide="editable" data-ng-click="editable = true" class="glyphicon glyphicon-edit"></span>
<span type="submit" data-ng-show="editable" data-ng-click="editable = false; change($index)" class="glyphicon glyphicon-ok-circle"></span>
<span type="submit" data-ng-show="editable" data-ng-click="editable = false; cancel()" class="glyphicon glyphicon-remove-circle"></span>
</td>
</tr>
Approved column gives either a 'Y' or a 'N'.
I have written the javascript code(change($index) functionality) at the backend to exchange values of Y and N on my necessity.
the second column shows an editable icon at all times for me to change values. I want it to show the editable icon only when {{x.approved}} == N so that i can change the approved status to Y.
I am not sure how or where to use the ng-show option.
Tried but not able to understand if ng-show='{{x.approved}}=="N"' works or not in the "td" element.
Help would be appreciated.
You can use ng-show or ng-if to show,hide the element
<span type="submit" ng-if='x.approved=="N"' data-ng-click="editable = true" class="glyphicon glyphicon-edit"></span>
FIRSTLY: There is no issue with td element,It will work properly.
Use without eval-expression as we are accesing in ng-elements
ng-show='x.approved=="N"'
Instead of
ng-show='{{x.approved}}=="N"'
Secondly: Check your condition by ng-if, like
ng-if='x.approved=="N"'
Hope it will help you.
span type="submit" data-ng-hide="editable" data-ng-click="editable = true" class="glyphicon glyphicon-edit">/span>
was replaced with
span type="submit" ng-show='x.approved=="N" && !editable' data-ng-click="editable = true" class="glyphicon glyphicon-edit">/span>
I got the desired answer with the above implementation.
Thanks for the support!
Hi guys I am new to Angular JS(1.5). I have a form with two buttons, btn1 and btn2. I also have two text fields.
How can I make sure that btn2 should work only when both text fields have data in them.
Kindly help me out.
I am using this code,
<button type="button" class="btn btn-primary btn-s" ng-disabled="queryExecuting || !canExecuteQuery()" ng-click="executeQuery()">
<span class="zmdi zmdi-play"></span> BTN1 </button>
<input type="text" name="dbname" ng-model="dbname" required placeholder="dbname"/>
<input type="text" name="tname" ng-model="tname" required placeholder="tname"/>
<button type="submit" class="btn btn-primary btn-s" ng-disabled="queryExecuting || !canExecuteQuery()" ng-click="saveToGDPQuery(dbname,tname)">
<span class="zmdi zmdi-play"></span> BTN2 </button>
You could do below:
<button type="submit" class="btn btn-primary btn-s" ng-disabled="!dbname || !tname" ng-click="saveToGDPQuery(dbname,tname)">
If you have those fields within a form you could also potentially use $error.required flags.
And by the way, you should have a "dot" in your model.
I have a html form with an add button which is attached to the right hand side of a textbox, and a separate delete button. The form uses some bootstrap css. However, the delete button shows up on the page as a small grey square, with no text inside it. What is making it show up so strangely?
<form id = "myform">
<div class="col-lg-6">
<h3> New Group: </h3>
<div class="input-group">
<input type="text" id = "input" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick = "addTag()" >Add</button>
</span>
</div><!-- /input-group -->
<table class = "table" padding = "5">
<ul id = "list" class="list-group">
</ul>
</table>
<button type = "button" class="btn btn-default" value = "Delete" id = "deleteBtn" onClick = "if(confirm('Are you sure?'))
Delete()"></button>
</form>
You must move the text from value in between the tags
<button type = "button" class="btn btn-default" id = "deleteBtn" onClick = "if(confirm('Are you sure?')) Delete()">Delete</button>
JSFiddle
The spaces. You shouldn't use spaces for and after your "="-s. So:
value = "Delete"
is bad.
value="Delete"
is okay. Good luck! :-)