Below is the example of my custom directives
<div ng-if="activitedTab == 'individual-accounts'">
<ind-table tmodel="choosenInfo.section1.src" ttype="{{activitedTab}}" clickaction="popup"></ind-table>
</div>
How can i put a condition for the property clickaction so that this property could be included only if the value of scope variable contentLength is true. I tried below way.
<div ng-if="activitedTab == 'individual-accounts'">
<ind-table tmodel="choosenInfo.section1.src" ttype="{{activitedTab}}" ng-if="contentLength" clickaction="popup"></ind-table>
</div>
But if the value of contentLength become false then entire section is not displayed. I just want to exclude clickaction property if the value of contentLength is false.
Remove the ng-if condition from the custom directive and use the ternary operator as-
clickaction="contentLength > 0 ? popup : '' "
Related
is it possible to check in ng-class whether if the myform.$valid then add a class?
I tried, so if the form is valid it will add the class "orange". Not sure if ng-class can do it like this or im just doing it wrong.
<input data-ng-disabled="vm.registerPassword != vm.registerConfirmPassword ? vm.registerPassword : disabled; registerForm.$invalid" disabled="disabled"
type="submit" id="submitForm" data-ng-click="vm.registerForm()" value="Register" class="btn-main orange maxw-200" ng-class="myform.$valid: 'orange'">
Here for the password condition:
data-ng-disabled="vm.registerForm.Password !== vm.registerForm.ConfirmPassword ? vm.registerForm.Password : disabled || registerForm.$invalid"
Yes it possibly. See in doc
In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.
ng-class="{'orange' : myform.$valid}"
Alternatively you can use a function, such as ,
ng-class="isValid(myform)"
and in your script...
$scope.isValid = function (frm){
if(frm.$valid == true)
return 'Orange'
else
return '';
}
I'm trying to add two classes to this div using ng-class, but even though checkForActive is returning true, it's being ignored and only class_{{$index}} is getting added.
If I remove class_{{$index}} altogether, active is added correctly.
Is there an obvious mistake in my syntax here?
<div "ng-class="{active: checkForActive, disabled: checkForDisable, class_{{$index}}} "></div>
You could just provide true value to the key class_{{$index}} just to that property gets added as a class name to the class list of the element. It is just the way you do active: checkForActive.
i.e
{active: checkForActive, disabled: checkForDisable, class_{{$index}} :true}
But i believe there could be some undesired behavior due the usage of interpolation ({{) within the ng-class directive (Atleast used to happen with older versions). So you could as well use an array.
ng-class="[checkForActive && 'active' , checkForDisable && 'disabled', 'class_' + $index]"
The above method will add a class name false if active or disabled is false, which should be harmless.
Or pass index to a controller function say getStatus($index) and return the object from there and use it in the ng-Class directive.
$scope.getClass = function(){
var obj = {active: $scope.checkForActive, disabled: $scope.checkForDisable};
obj['class_' + this.$index] = true;
return obj;
}
and
ng-class="getClass()"
#Okazari pointed out that it indeed works by mixing class with ng-class so you could also do:
class="class_{{$index}}" ng-class="{active: checkForActive, disabled: checkForDisable}"
I need to hide element if value is zero. I tried:
<span ng-hide="currentCount.appointment == 0">{{currentCount.appointment}}</span>
In console.log(currentCount.appointment) I see that after changes value of currentCount.appointment is zero, but why span block does not hide?
Full code:
request.success(function () {
$scope.currentCount = CounterNotificationService.setCounterInc('appointment', 'decr');
console.log($scope.currentCount.appointment);
});
seems to work,
{{currentCount.appointment == 0}}
evaluates to
true
i created a fiddle with the ng-hide and the ng-class approach
Try this:
<span ng-hide="currentCount.appointment == '0'">{{currentCount.appointment}}</span>
I need to output the values and perform some calculations with the values of AngularUI sliders.
I have this mark-up:
<body ng-controller="sliderDemoCtrl">
<div ui-slider="{range: 'min'}" min="0" max="50" ng-model="demoVals.slider"></div>
<p>The value so far is:
<span ng-bind="demoVals.slider"></span> // I want this to show 0 until the slider is moved
</p>
<p>The calculated value is: <input type="text" ng-model="calculated" value=" {{ calculated }}" placeholder=0 /></p>
</body>
Firstly, I can't work out how to initialise that <span ng-bind="demoVals.slider"></span> with a default value of 0 or "None". At the moment it is blank until the slider moves. How can I set this to a default value?
Secondly, I want the value of {{ calculated }} to be a number multiplied by the value of the slider. How can I pass the value of the slider to ng-model="calculated" or access the value from within my controller?
Here's my Plunkr
You can set the initial value of the ng-model in the $scope:
$scope.demoVals = {};
$scope.demoVals.slider = 0;
And to keep the value of calculated in one way sync with the demoVals.slider, you can use a $watch on the $scope:
$scope.$watch('demoVals.slider', function (newVal) {
if (typeof newVal !== 'undefined') {
$scope.calculated = newVal * 3.14159; // Use any value here.
}
});
Working demo.
The way ng-model works, it binds to the scope property you define in it's attribute value in the markup. If no such scope property exists, it gets created on initialization.
Thus, to set start value just create that model property. To adjust another scope property based on changes to the slider model you can use $watch to listen for changes to the slider model property
app.controller('sliderDemoCtrl', function($scope) {
/* ng-model bound to this object, so define it's start value*/
$scope.demoVals={slider:10}
/* watch for changes*/
$scope.$watch('demoVals.slider',function(newVal,oldVal){
if(newVal){
$scope.calculated=2*newVal;
}
})
$scope.calculated = 0;
});
DEMO
In an underscore template, is there any other way to access an attribute besides by its name? I've got one called "2a" and I cannot reference it directly, due to its first character being a number. For example, this doesn't work:
<input type="checkbox" name="6a" <%= 6a ? "checked" : "" %>>
Thanks!
You have a few options other than renaming the offending attribute.
Underscore's _.template has a variable option:
By default, template places the values from your data in the local scope via the with statement. However, you can specify a single variable name with the variable setting.
So you could do this:
<input type="checkbox" name="6a" <%= v['6a'] ? "checked" : "" %>>
and this:
var t = _.template($('#whatever').html(), null, { variable: 'v' });
var h = t({ '6a': true });
Demo: http://jsfiddle.net/ambiguous/hBhfu/
You could also wrap it manually when you call the template function:
t({ v: { '6a': true }});
You'd use the same template as above in this case.
Demo: http://jsfiddle.net/ambiguous/8AZKw/