Code:
<label class="checkbox-inline">
<input type="checkbox" name="activeFlag" id="active"
value="active" ng-checked="flag" ng-click="flag=!flag"/>
<span ng-show="flag">Yes</span><span ng-show="!flag">No</span>
<input ng-if="::flag" type="button" style="width:85px;" value="Active"
class="btn btn-success btn-xs"/>
<input ng-if="::!flag" type="button" style="width:85px;" value="Deactivated"
class="btn btn-danger btn-xs"/>
</label>
Here as you can see, i need to toggle "Yes" to "No" when checkbox is clicked, but I don't need to change my button value once it is fixed. I tried using ::falg , but it gives out "Active" only for any initial value of flag.
Suggest my error.
The double colon is using the One-time binding syntax so once it evaluates flag it doesn't watch it anymore. In this instance you'd want to remove the ::.
Also if you have any actions (like click events) on the buttons you're showing or hiding you'll need to re-bind them if you use ngif. If you use ngshow/nghide you won't. Here's a good summary of when to use which:
When to favor ng-if vs. ng-show/ng-hide?
Editing to add, if flag is always returning true when it's initially evaluated then you need to look at how you're setting your values initially as once it's set it won't be re-evaluated after the code is parsed because of the one-time binding.
Related
How can I enabled ng-click on a text input even if the input is disabled?
<input type="text" ng-model="myModel" ng-click="vm.handleClick()" ng-disabled="true" />
This is impossible in fact. Each AngularJS directive has its own priority. You may notice that ngDisabled has priority 100, while ngClick set at 0. Moreover, ngDisabled required to set native input disabled attribute, because it does not support interpolation.
Speaking about native input disabled state:
If the element is disabled, it does not respond to user actions, it
cannot be focused, and the command event will not fire.
Other words - if it is disabled then it is disabled and no events are possible. Otherwise disabled directive would be meaningless.
make a wrapper and bind ng-click on it. i.e.
<div ng-click='ur_Function()'>
<input type="text" ng-model="myModel" ng-disabled="true" />
</div>
U can check in your function whether input enabled is true or false and perform accordingly
Actually, I am using this combined date and time picker, but it simply an extension of the standard , so I doubt that it is causing my problem.
Here's my HTML
<input type="text" class="form-control" datetime-picker
ng-model="campaign.start_time" is-open="startDateTimePicker.isOpen" />
I open the picker and select a date & time (which are, in any case, now by default), then I click a "Save" button which should send he data to the server.
However, when I breakpoint and look at campaign, several other fields which were bound to it, such as campaign.title (froma text input field) are set, but campaign.start_time is nulll.
Obviously, I am making a very simple mistake, but what?
The "Save" button looks like this
<button type="button" class="btn btn-outline btn-default"
ng-click="SaveCampaignEdit(campaign);"
accesskey='s' style="margin-left:10%">Save</button>
I have the following jsfiddle code: http://jsfiddle.net/838SY/1/
My question is how can I make the following ng-click to set the isEditable only for the clicked entry and at the same time call the edit(object) method?
<span ng-click="flag == true||(isEditable=!isEditable)">
I've tried this:
<span ng-click="flag == true||(isEditable=!isEditable; edit(object))">
Doesn't work.
I've tried:
<span ng-click="flag == true||edit(object)">
and at the edit method level I defined :
$scope.isEditable=!$scope.isEditable;
this approach will set the isEditable value for all the list elements, which is not what I want. I only want it set for the clicked element.
Any ideas?
Thanks.
You can use this sintax:
flag == true? edit(object):false
<div ng-show="!isEditable">
<input type="text" ng-model="object.text" ng-blur="isEditable!=isEditable;update(object);edit(object);" />
</div>
This will call the multiple methods when the user get blurred from the text box.So, by this you can specify the multiple methods that need to be called on the blur event of the text box
I'm trying to keep a button disabled under two conditions. The first is if a required fields condition has been meet (is there isn't text in the input) the second is if the Boolean value is false. The problem is for some reason my directive seems to acting like an or rather than an And where the button becomes enabled after either one of the two conditions is meet.
Here is the button I'm trying to keep disabled when both conditions aren't met
<button type="button" id ='submission' class="btn btn-success ng-hide" ng-show="submissionReady" ng-hide="afterSubmission" ng-click="saveScenario()" ng-disabled="myForm.title.$invalid && !playerService.status">Save Scenario</button>
You want the button to be disabled if one of the conditions is true. Not if both conditions are true. So you need an OR, not an AND:
ng-disabled="myForm.title.$invalid || !playerService.status"
I am looking for a way to reset the file selection, in case the user choose an invalid file for instance.
From this issue on gitHub, it appears that you need to unbind the event in order to reset the file selection, now, how do I do such a thing in AngularJS?
Markup:
<form name="applyForm" data-file-upload="model.uploadOptionsResume" action="{{model.application_url}}" method="{{model.method}}" enctype="multipart/form-data">
<fieldset>
<input type="file" data-ng-model='model.formData.resume' name="resume" data-ng-disabled="" data-valid-file data-my-validate data-value-required="true">
<submit data-ng-disabled="applyForm.$invalid || innerLoader" class="btn btn-primary" style="width:99%;" data-ng-click="submit(); model.submitFormApplicant()">
Apply
<!-- submitFormApplicant() check if a file is selected and if not does regular submit -->
</submit>
</fieldset>
</form>
I think that unbinding the event is required because of the closed over variables that are captured with the .on('click', ... anonymous function. I am pretty sure your code can be structured to not rely on the closure, thus removing the need to unbind from ng-click. However, without seeing your code, I cannot be sure that closures are your problem nor can I really recommend how restructure your code if they are.