I have these 2 inputs (buttons)
<div class="modal-footer">
<button class="btn btn-secondary" (click)="close()">Close</button>
<input *ngIf="!isEdit" type="button" class="btn btn-primary" (click)="addCustomer(myForm)" value='Add data'>
<input *ngIf="isEdit" type="button" class="btn btn-success" (click)="updateCustomer(myForm)" value='Update'>
</div>
where if isEdit is false then I want to show the button "Add data" else I want to show the button "Update" but I wonder if there's a way to simplify this a bit more rather than using 2 inputs for each. Thanks in advance!
else capability was added somewhat recently; that's probably why most documentation doesn't have it (yet). But you can write this way:
<div class="modal-footer">
<button class="btn btn-secondary" (click)="close()">Close</button>
<input *ngIf="!isEdit; else update" type="button" class="btn btn-primary" (click)="addCustomer(myForm)" value='Add data'>
</div>
<ng-template #update>
<input type="button" class="btn btn-success" (click)="updateCustomer(myForm)" value='Update'>
</ng-template>
It works; but I don't know how much better it is compared to what you have.
Related
I have two buttons on the asp.net core razor page as shown below code:
<div class="row div-form-control">
<div class="col-md-12">
<div class="form-group actions">
<button type="button" name="submit" id="submit" class="btn btn-primary" action="save"><i class="icon-floppy-disk position-right"></i>Submit</button>
<button type="button" class="btn btn-primary" action="search"><i class="icon-new-tab position-left"></i>Search</button>
</div>
</div>
</div>
now I want to hide Submit Button in C# when the User Role is not an Admin like:
string Role="NormalUser";
if(Role!="Admin"){
submit.Visibility = Visibility.Hidden;
}
but it does not work because in submit button I don't have Runat="Server" I want to hide it without using Ranat="Server" by JavaScript or Another Method Can anyone help me how to do it?
Thanks
one way to do it is like:
#if(Role!="Admin"){
<button type="button" name="submit" style="display:hidden;" id="submit" class="btn btn-primary" action="save"><i class="icon-floppy-disk position-right"></i>Submit</button>
}else{
<button type="button" name="submit" id="submit" class="btn btn-primary" action="save"><i class="icon-floppy-disk position-right"></i>Submit</button>
}
I am new to angularJs, i have a function in my angular controller as
$scope.addPrimaryClass = function () {
var weekDayBtn = $(".weekdayButton");
weekDayBtn.addClass("btn-white").removeClass("btn-primary");
$.each(weekDayBtn,function (index) {
if($(this).val()==$scope.weekly){
$(this).addClass("btn-primary").removeClass("btn-white");
}
})
};
In view i have :
<div class="btn-group">
<button class="btn btn-white weekdayButton" type="button" value="7" ng-click="weekdayClicked($event);">Sun</button>
<button class="btn btn-white weekdayButton" type="button" value="1" ng-click="weekdayClicked($event);">Mon</button>
<button class="btn btn-primary weekdayButton" type="button" value="2" ng-click="weekdayClicked($event);">Tue</button>
<button class="btn btn-white weekdayButton" type="button" value="3" ng-click="weekdayClicked($event);">Wed</button>
<button class="btn btn-white weekdayButton" type="button" value="4" ng-click="weekdayClicked($event);">Thu</button>
<button class="btn btn-white weekdayButton" type="button" value="5" ng-click="weekdayClicked($event);">Fri</button>
<button class="btn btn-white weekdayButton" type="button" value="6" ng-click="weekdayClicked($event);">Sat</button>
</div>
The code in addPrimaryClass works as required in console since i can use normal jquery there, but the code doesn't work in angular itself. Basically, i want to change the css of buttons according to one of the scope value. Please help!!!
You can use the ng-class directive to apply the classes depending on what the scope variable is. For example:
<button class="btn weekdayButton" type="button" value="7" ng-click="weekdayClicked($event);" ng-class="($(this).val()==$scope.weekly) ? 'btn-primary' : 'btn-white'">Sun</button>
There are several ways using the ng-class directive. Please have a look at the documentation and decide what's best for you: https://docs.angularjs.org/api/ng/directive/ngClass
On a separate note, you might want to remove all jQuery from your Angular code :)
Here's what I've got for my script. Below it seems to be working fine but it's not working on my site. I've seen other examples where it's suggesting using document.querySelector but I'm not very familiar with Js at all and am having trouble implementing the example scripts. Can anyone shed some light on what I'm doing wrong and how I can better write and condense the script? Thanks in advance for your time and help!
document.getElementById("btn").onclick=function () {
document.getElementById("secdes").innerHTML="change";
}
document.getElementById("btn1").onclick=function () {
document.getElementById("secdes").innerHTML="changes";
}
<div class="col-md-4 buttons btnbox">
<button type="button" name="btn" id="btn" class="btn btn-outline-primary homebtn">Home Page</button>
<button type="button" name="btn1" id="btn1" class="btn btn-outline-secondary secondarybtn">Secondary Page</button>
<button type="button" name="btn2" id="btn2" class="btn btn-outline-secondary blogbtn">Blog</button>
<button type="button" name="btn3" id="btn3" class="btn btn-outline-secondary blogbtn">About Page</button>
<p class="rubydes">To create the fantasy world for the viewers each illustration incorporated the theme of "The Yellow Brick Road". </p>
<p class="secdes" id="secdes">The challenge of the home page was to seamlessly incorporate the shoe box and "Ruby Slipper" photograph into the illustration.</p>
</div>
Something you could possibly try would be to give each button a unique id and then access them from javascript.
Try this (edited).
Html:
<div class="col-md-4 buttons btnbox">
<button type="button" name="btn" id="btn" class="btn btn-outline-primary homebtn" onclick="myFunction1()">Home Page</button>
<button type="button" name="btn1" id="btn1" class="btn btn-outline-secondary secondarybtn" onclick="myFunction2()">Secondary Page</button>
<p class="rubydes">To create the fantasy world for the viewers each illustration incorporated the theme of "The Yellow Brick Road". </p>
<p class="secdes" id="secdes">The challenge of the home page was to seamlessly incorporate the shoe box and "Ruby Slipper" photograph into the illustration.</p>
</div>
Javascript:
function myFunction1(){
document.getElementById("secdes").innerHTML="change";
}
function myFunction2(){
document.getElementById("secdes").innerHTML="changes";
}
Here are a JSFiddle with the solution.
<div class="col-md-4 buttons btnbox">
<button onclick="javascript:test('text 1', 'secdes')" type="button" name="btn" id="btn" class="btn btn-outline-primary homebtn">Home Page</button>
<button onclick="javascript:test('text 2', 'secdes')" type="button" name="btn1" id="btn1" class="btn btn-outline-secondary secondarybtn">Secondary Page</button>
<button onclick="javasxript:test('text 3', 'secdes')" type="button" name="btn2" id="btn2" class="btn btn-outline-secondary blogbtn">Blog</button>
<button onclick="javascript:test('text 4', 'secdes')" type="button" name="btn3" id="btn3" class="btn btn-outline-secondary blogbtn">About Page</button>
<p class="rubydes">To create the fantasy world for the viewers each illustration incorporated the theme of "The Yellow Brick Road". </p>
<p class="secdes" id="secdes">The challenge of the home page was to seamlessly incorporate the shoe box and "Ruby Slipper" photograph into the illustration.</p>
</div>
function test(myText, targetID) {
document.getElementById(targetID).innerHTML=myText;
}
https://jsfiddle.net/s8xuajv1/10/
I hope it can help you.
Best regards.
I have a list of bootstrap buttons and also a search box and I want to implement a filter function(preferably in javascript) to filter the number of buttons:
The bootstrap code is here:
https://jsfiddle.net/7zyrdnab/
<div class="row">
<div class="col-lg-2">
<div class="panel">
<input type="text" id="search" placeholder="Type to search">
<br>
<button type="button" class="btn btn-secondary">AA1009</button>
<button type="button" class="btn btn-secondary">AA1010</button>
<button type="button" class="btn btn-secondary">BA1098</button>
<button type="button" class="btn btn-secondary">BB1890</button>
<button type="button" class="btn btn-secondary">C89761</button>
<button type="button" class="btn btn-secondary">CD1667</button>
<button type="button" class="btn btn-secondary">GG7830</button>
<button type="button" class="btn btn-secondary">GF65372</button>
<button type="button" class="btn btn-secondary">BH6537</button>
<button type="button" class="btn btn-secondary">HGB562</button>
<button type="button" class="btn btn-secondary">LK9063</button>
<button type="button" class="btn btn-secondary">CP9871</button>
<button type="button" class="btn btn-secondary">IRON87</button>
<button type="button" class="btn btn-secondary">ACT567</button>
<button type="button" class="btn btn-secondary">MPO760</button>
<button type="button" class="btn btn-secondary">GH5436</button>
<button type="button" class="btn btn-secondary">NBH894</button>
<button type="button" class="btn btn-secondary">GHFDF6</button>
<button type="button" class="btn btn-secondary">US4536</button>
<button type="button" class="btn btn-secondary">MO9854</button>
</div>
</div>
</div>
The filter should work like this:
if AA is typed, only the buttons with the text "aa" should be visible.
The only suggestion i got while searching online was use list.js but I was wondering if there can be a simpler javascript search implementation.
https://jsfiddle.net/Shuaso/qhku76bu/
The jquery:
var $button = $('.btn');
$('#search').keyup(function() {
var re = new RegExp($(this).val(), "i"); // case-insensitive
$button.show().filter(function() {
return !re.test($(this).text());
}).hide();
});
Basically you want to run the function each time the user types in the input to filter the elements. You are hiding all buttons that do not match the user input.
For form validation, either 'Foo' or 'Bar' should be selected below. The form should be invalid, and submit button disabled, if neither one is selected.
Is there an AngularJS directive that's up to the task? We've tried some permutations of "ng-require" and/or "required", along with some other experimentation, but no luck. Is it not possible with buttons?
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-default" data-ng-click="vm.setCaseType('Foo')" data-ng-class="{ 'active': vm.caseType == 'Foo' }">Foo</button>
<button type="button" class="btn btn-default" data-ng-click="vm.setCaseType('Bar')" data-ng-class="{ 'active': vm.caseType == 'Bar'}">Bar</button>
</div>
</div>
AngularJS 1.2.16; Bootstrap 3.1.1
on click of any of the buttons call a method which sets a flag to false say 'btnSelected'.
Now you could use this flag with ng-disabled inside the submit button.
in the way described below
<div class="btn-group">
<button type="button" class="btn btn-default" data-ng-click="Chk()">Foo</button>
<button type="button" class="btn btn-default" data-ng-click="Chk()">Bar</button>
</div>
Now in your controller.Set the button to true by default to keep the button disabled,enable it via flag through the function like:
$scope.btnSelected = true;
$scope.Chk = function(){
$scope.btnSelected = false;
}
On your save button:
<button type="submit" ng-disabled="testForm.$invalid || btnSelected" class="btn btn- primary">
<span class="glyphicon glyphicon-save"></span> Save </button>