I have hided an element using ng-hide.
Then tried to show it using a function. but it is not showing..
<input type="button" class="btn btn-primary btn-sm margin-right-15 ng-hide" value=" Edits "
ng-click="EditValueSalComponent(T,p,K)" id="{{'in'+T.id}}"/>
<div ng-if="(p.id == K.emp_id && T.id == K.component_id)">
{{K.amount}}
<div ng-init="hideinputbox(T.id)"></div>
</div>
$scope.hideinputbox = function (k) {
$("input#in" +k).show();
}
You have to do it angular way .
Like this
<input type="button" ng-hide="T.hideMe" class="btn btn-primary btn-sm margin-right-15" value=" Edits "
ng-click="EditValueSalComponent(T,p,K)" id="{{'in'+T.id}}"/>
<div ng-init="hideinputbox(T)"></div>
JS
$scope.hideinputbox = function (k) {
k.hideMe=!k.hideMe
}
I totally agree with the answer provided by #anik, but just to add on. Whenever you are performing an operation out of the context of angular (via a 3rd party lib or framework like jQuery). The scope values would not be updated as the digest cycle is not triggered . Thats why it is important that you always stay within the angulars execution context.
Related
I have a trouble when I try to pass values from razor to a javascript function.
This works
<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill()" />
function deletePill() {
console.log("Hola");
}
But when I do this it doesn't work
<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill(#item.Id)" />" />
Or
<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill()" data="#item.Id" />
function deletePill(Id) {
console.log(Id);
}
What should I change or add for it works?
I want passing values from Razor to javascript functions
The variables have values but it doesn't pass the values properly
The variables have values but it doesn't pass the values properly. I want passing values from Razor to javascript functions.
Well, the way you are trying to pass value is incorrect. You ought to pass value using string literal because, while you are writing Razor syntax you are in C# mode so, you have to pass value through single qoutation as like 'YourValuee'. In your scenario you should write as onclick="deletePill('#item.Id')". Therefore, in your code, you are ceretainly,missing the single qoutation ''
Solution:
HTML:
<input type="button" class="btn btn-primary mx-1" value="Delete From Razor To Js Func" onclick="deletePill('#item.ItemId')" />
Javascript:
#section scripts {
<script>
//Function Button Delete
function deletePill(Id) {
alert("User Id:" + Id + " will be Deleted!");
console.log(Id);
}
</script>
}
Output:
Note: If you would like to know more details on it you could check our official document here
I'm using xeditable angular directive.Could you tell me how to use 2 cancel buttons ? B'cos I need to implement 2 functionalities on it.I mean cancel + my work 1 and cancel + my work 2. Thanks in advance.
HTML
<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">
//UI code here
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">Cancel</button>
</form>
JS
// cancel all changes
$scope.cancel = function() {
};
JSFiddle
You can have 2 cancel buttons within the form and pass the form as attribute. Then in the corresponding cancel functions you can invoke form.$cancel and then do your logic. form.$cancel does the same work as invoking ng-click="tableform.$cancel()".
Play with it : Plunker
//html
<button type="button" ng-disabled="tableform.$waiting" ng-click="cancel1(tableform)" class="btn btn-default">cancel 1</button>
<button type="button" ng-disabled="tableform.$waiting" ng-click="cancel2(tableform)" class="btn btn-default">cancel 2</button>
//controller
$scope.cancel1 = function(tableForm) {
// Call tableForm cancel to reset
tableForm.$cancel();
//Logic1
};
$scope.cancel2 = function(tableForm) {
// Call tableForm cancel to reset
tableForm.$cancel();
//Logic2
};
Actually you should be able to take control of how the cancel button function. If you take carefully into the code you will see that, they just create some buttons and display or hide them base on the current form status(form.$visible)
Do something like this.
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel1</button>
</div>
Here is an example
The below code generates a json string on the click of some buttons.
<div id="btnStudios" >
<button type="button" id="01" value="warner" class="btn btn-default">Warner</button>
<button type="button" id="02" value="tf1" class="btn btn-default">TF1</button>
<button type="button" id="03" value="gaumont" class="btn btn-default">Gaumont</button>
<button type="button" id="04" value="pathe" class="btn btn-default">Pathe</button>
<button type="button" id="05" value="studiocanal" class="btn btn-default">StudioCanal</button>
<button type="button" id="06" value="francetv" class="btn btn-default">FranceTV</button>
<button type="button" id="07" value="m6snd" class="btn btn-default">M6SND</button>
</div>
var output = $(".btn").click(function() {
$(this).toggleClass('active');
var output = {
Studios: $('#btnStudios button.active').map(function() {
return $(this).val();
}).get(),
};
if (!output.Studios.length) {
output.Studios = $('#btnStudios button').map(function() {
return $(this).val();
}).get()
$('.list').html(JSON.stringify(output));
});
Basically what i am looking for is a timer which refreshes for 1 second everytime a button is clicked and then generates the json string based on the button selection.
I used the setInterval() function but that did not help.
How would i go about this?
Thanks in advance.
I didn't fully understand your question.
However, based on the code, I assume you want to show a JSON-string based on which buttons have the .active class?
Your code contained syntax errors.
I created a quick JSfiddle with what I think you wanted.
However, I have made no use of setTimeout since I couldn't come up with valid use case.
Feel free to provide us with more info and I'll improve my answer!
EDIT:
Okay, so you want to wait 1sec after the click.
I updated the JSfiddle.
EDIT²:
I'd also use clearTimeout so clicks that happened while you are already waiting 1 sec are ignored.
As seen in this JSfiddle.
This works:
<h4>Radio & Uncheckable Radio</h4>
<pre>{{radioModel || 'null'}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
This doesn't work
{{radioModel || 'null'}}
<div class="btn-group">
<label class="btn btn-primary" data-ng-repeat="store in global.user.store" ng-model="radioModel" btn-radio="{{store}}" uncheckable>{{store}}</label><br>
</div>
If you select one radio button, the other radiobuttons don't de-select. Instead of having one radio button checked at a time, all 3 can be checked! And the {{radioModel}} won't display any value. For the first example, {{radioModel}} would display 'Left,' 'Right,' or 'Middle' depending on the value of btn-radio.
It's like data-ng-repeat="store in global.user.store" breaks the button behavior!
Try setting the scope variable with a dot, like if it an object.
$scope.radio = {model: null}; //for example
And use always radio.model instead of radioModel.
This is because the way the scope inheritance works each ng-model of the ng-repeat will generate a new scope. With the 'dot' rule you want have this problem.
Here is more information https://github.com/angular/angular.js/wiki/Understanding-Scopes
Try removing the {{}} in the btn-radio attribute :
<label class="btn btn-primary" data-ng-repeat="store in global.user.store" ng-model="radioModel" btn-radio="store" uncheckable>{{store}}</label>
Is it possible to update a razor variable using onclick on a element?
MVC VIEW:
#{
string iconNumber = "1";
}
<button type="submit" onclick="#iconNumber = '2'; alert('#iconNumber');"></button>
Console error:
Uncaught ReferenceError: Invalid left-hand side in assignment
Thanks
I am not able to understand from your comments for what purpose you trying to update the razor variable, but if you really wants to update your razor variable from 1 to 2 (from your question), then i would suggest to try like below
#{
int iconNumber = 1;
}
then,
<button type="submit" onclick="#(iconNumber++); alert('#iconNumber');"></button>
Hope it helps...But also note that iconNumber will increment on each click of button. So, I can help you if you show some more code
When reading this question the day after, one would think I was under the influence of drugs.
I came up with a better solution that only uses javascript variables:
VIEW:
<script>var iconNumber = 0;</script>
#using (Ajax.BeginForm("", "",
new AjaxOptions
{
OnBegin = "$('#iconElement' + iconNumber).attr('class', 'fa fa-spinner fa-spin');",
HttpMethod = "POST"
}))
{
Html input here
<button type="submit" class="btn btn-danger" id="IconElement1" onclick="iconNumber = 1;">
<button type="submit" class="btn btn-danger" id="IconElement2" onclick="iconNumber = 2;">
<button type="submit" class="btn btn-danger" id="IconElement3" onclick="iconNumber = 3;">
}
I can now disable the form after submit to prevent multiple requests. Because I don't start the spinner directly in onclick I don't have to disable the buttons, (spinner wont start).