Is it ok to write this?
<button href="#" ng-class="{'disabled' : form.mail.$invalid && form.firstName.$invalid }"></button>
I thought it was right, but it doesn't work. I have a form, and I need to disable the Send button if these conditions aren't ok.
If I write only one condition, it works.
You can simply use (, ) on your condition:
ng-class="{'disabled': (form.mail.$invalid && form.firstName.$invalid)}"
JSFiddle for demo
As a side note, as far as I know your code should works well.
You should pass the ng-disabled attribute to the button with the proper expression. Not seeing your code, something along the lines of:
<button ng-disabled="form.mail.$invalid && form.firstName.$invalid ">... </button>
Related
These attributes are both given either a true or false value, so what difference is there between them? It would make sense if there weren't values for them.
Am I missing something?
With ng-show the element is shown if the expression is true, it will hide if it is false
On the other hand with ng-hide the element is hidden if the expression is true and it will be shown if it is false.
Just two sides of the same coin.
On a project I was working on before, I found having the option of both ng-show and ng-hide useful. The reason being is because I had a link in my navbar that was only supposed to show if the user was on a specific view. Here is that scenario:
<li ng-hide="isActive('/about') || isActive('/contact')" ng-class="{ 'vert-nav-active': isActive('/investigator')}" class="top-buffer">
Investigator Portal
</li>
Now, you might say, well you could just make the isActive('/about') || isActive('/contact') return the opposite Boolean and change the ng-hide to ng-show and every thing will stay the same but as you can see I'm also using this function to determine which link I'm on. If I reverse this logic, it will look like I'm on every link except the actual link I'm on. Granted I could write another function for the ng-show but I like reusing code that's already there.
Also worth mentioning is ng-if which takes a boolean expression just like ng-show and ng-hide but rather than just showing/hiding the elements depending on the expression, it completely removed the element from the DOM if the expression is false and put the element back in the DOM if the expression becomes true
i have a good scenario, let say you want to show one attribute or another depending on a validation, but not both, so using both ng-show and ng-hide like this:
<div ng-show="validation"></div>
<div ng-hide="validation"></div>
if the validation is true it would show the first div, but if it is false it would show the second div...
this can be done in many more ways but is a cleaver solution for a tricky problem :D
ng-show will only display the element IF the expression is true...
<span ng-show="true">Will Show </span>
<span ng-show="false">Will not Show </span>
ng-hide will not display the element IF the expression is true, but will display if the expression is false.
<span ng-hide="true">Will not display</span>
<span ng-hide="false">Will display</span>
Would like to use btn-checkbox in place of all my checkboxes on a form. I am looking for the syntax to make a generic reference to the value of the bound property from within the attributes, in this case ng-class.
<button type="button"
ng-class="{true: 'btn btn-success',
false:'btn btn-checkbox-off'}
[vm.csrMain.doubleAggregate]"
ng-model="vm.csrMain.doubleAggregate"
btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false">
DOUBLE AGGREGATE
</button>
( using ctrl as vm syntax ) The code above works, but I want to make a generic reference to the value of the ng-model in the brackets where I am hard coding the bound property [vm.csrMain.doubleAggregate] something like [ng-model.$value]
Tried to do a plunker here. Not sure why I can't get the btn-checkbox behavior I get successfully in the code above. If someone could guide me on that as well I'd appreciate it as this my first shot at a plunk from scratch plunker
I'm wondering if it's possible to use a ternary expression in the ng-click attribute. I don't want to use a separate controller function if possible.
It's a two button toggle setup - I can get a simple toggle working, but don't want a second click of the "off" button to turn back on.
The ternary in ng-click does not work (note the ternary in ng-class does work):
<button
ng-click="allOn2==true ? allOn2 : !allOn2"
ng-class="allOn2==true ? 'btn-green-on' : 'btn-green-off'">
ON</button>
Here's a more complete jsfiddle:
toggler
You are not doing anything with the ternary expression. For it to be useful, assign it:
{{ var1 }} {{ var2}}
<button
ng-click="var1 = (allOn2==true ? allOn2 : !allOn2)"
ng-class="{'btn-green-on':allOn2, 'btn-green-off' : !allOn2}">
ON</button>
I'm not sure how you can use ternary expressions for ng-class though...
You can use something as as a workaround for ternary
ng-click="(AppliedApps!=null && Collapse('CollapsedAppliedApplications')) ||
(AppliedApps.length==0 && Collapse('CollapsedAppliedApplications'))">
I have tried to do the following:
<accordion-heading ng-click="doSomething(); isopen=!isopen">
Should this work? or is it not possible to string there call together?
ng-click="doThis(param); doThat(param);"
I just need pointed in the right direction :-)
EDIT:
this:
ng-click="doThis(param); doThat(param);"
works as expected, I think it is:
isopen=!isopen
that is causing the problem, I realise I didn't say this initially.
I go around this by adding an extra div into the accordion heading, like this:
<accordion-heading ng-click="isopen=!isopen">
<div ng-click="showMainView()">
<i class="glyphicon" ng-class="{'glyphicon glyphicon-minus': isopen, 'glyphicon glyphicon-plus': !isopen}"></i>
{{item.model}}<br>{{item.model_engine}}
</div>
</accordion-heading>
possible !! possible !! possible !! possible !! possible
You can call multiple functions with ';'
See here
Using ng-click to call two different functions
How to add many functions in ONE ng-click?
How to use ng-click with multiple expressions?
It works:
http://plnkr.co/edit/fwSdBT3NIBrlk80aTgaB?p=preview
However be careful not to do too much logic in there. You should put the logic in the controller and only call it from the view. (isopen = !open for example doesn't belong on the view)
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"