I'm having trouble grasping that when item.dynamicClass = 'article' why
<div class="type" ng-class="{{ item.dynamicClass }}">
doesn't return a div like:
<div class="type article">
but instead returns:
<div class="type" ng-class="article">
The only way I've been able to get this work is by doing
<div class="type" ng-class="itemClass(item.dynamicClass)">
// Controller
$scope.itemClass = function(type) {
return type;
};
I would like a solution which doesn't involve the controller
I don't think you need the binding braces. What is passed to ng-class is an expression that evaluates to a result, not something to bind (fiddle):
<div class="type" ng-class="item.dynamicClass">
Related
<div ng-bind="model">
<div>inner html</div>
</div>
Does anyone know how to display the inner div? Seems the ng-bind directive will always rewrite div element.
Thanks in advance.
ng-bind will always print what is in the model.
You can do the following thing:
<div>
<div ng-bind="model"></div>
<div>inner html</div>
</div>
Either you can do something like:
//JS
app.controller("nameController", function($sce) {
model = $sce.trustAsHtml("<div>inner html</div>");
});
//HTML
<div ng-bind-html="model"></div>
I am referencing a value in my controller that may be a string or an array. If it's an array, I want to use "ng-repeat" (probably) to list out my items.
If it's a string, I just want to display the string.
Something like:
<div>
{{if is array}}
<span ng-repeat="v in myvalue">{{v}}</span>
{{else}}
{{myvalue}}
{{endif}}
</div>
I'm wondering if there's an elegant way to do this in Angularjs that I'm simply not yet familiar with.
Thanks
There is angular.isArray method. You can use that. You need to place it in the the scope or vm:
$scope.isArray = angular.isArray
And in HTML
<span ng-repeat="v in myvalue" ng-if="isArray(myvalue)">{{v}}</span>
<span ng-if="!isArray(myvalue)">{{myvalue}}</span>
If you are using it in more than one place, best is to go for a directive.
Do the logic on the controller (assign to a different variable for array and string) - then just do the dumb logic in the view:
if (Array.isArray($scope.myvalue)) {
$scope.myArray = $scope.myvalue;
} else {
$scope.myString = $scope.myvalue;
}
And the view
<div>
<div ng-if="myArray">
<span ng-repeat="v in myArray">{{v}}</span>
</div>
<div ng-if="myString">
{{myString}}
</div>
</div>
make a simple getter
$scope.getVal = function( vals ){
if(Array.isArray(vals)) return vals
else return [ vals ]
}
then instead of ng-if AND ng-repeat just use the repeater as you normally would.
<div ng-repeat="val in getVal(vals)"> {{ val }} </div>
I am trying to implement some directive, which will be based on the value of one variable in other Service. Here is my code:
if (this.SomeService.variable.condition){
element.show();
} else {
element.hide();
};
However, it is called only once, when the page is bootstraped. How can I make it so that if the variable changes, the element shows/hides? Is there any way to do it without watcher?
You can use ng-show / ng-hide that are angularjs construct used to hide or show a particular piece of HTML.
For example:
<div ng-show="true">HELLO I AM THE FIRST DIV</div>
<div ng-hide="true">HELLO I AM THE SECOND DIV</div>
will return something like
HELLO I AM THE FIRST DIV
Inside ng-show you can put watherver kind of variable so then if your javascript is something like this:
angular.module('mymodule').controller('MyCtrl',[function(){
var self = this;
self.isVisible = true;
}]);
you can use that variable in your code:
<div class="container" ng-controller="MyCtrl as c">
<div ng-show="c.isVisible">HELLO I AM THE FIRST DIV</div>
<div ng-hide="c.isVisible">HELLO I AM THE SECOND DIV</div>
</div>
And the result is the same
I was wondering if there were no compatibility issues when ng-switch-when and ng-class are using on the same element like in this sample.
I'm trying to dynamically change the class of this four elements but for some reasons this isn't working on all of them, just on the one who's currently displayed.
Does anyone know what's going on here?
<div>
<div ng-switch="sw" ng-init="sw=1">
<div ng-switch-when="1" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="2" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="3" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="4" ng-class="oneClassOrAnother()"></div>
</div>
<div>
<button ng-click="goTo(1)">1</button>
<button ng-click="goTo(2)">2</button>
<button ng-click="goTo(3)">3</button>
<button ng-click="goTo(4)">4</button>
</div>
</div>
Switch between divs.
$scope.goTo = function(x) {
$scope.sw = x;
}
Return one class or the other one.
$scope.oneClassOrAnother= function() {
if (...) return "class1";
else return "class2";
}
Many thanks.
It doesn't look like you're using the ng-class syntax correctly. Try something like this:
<div ng-class="{class1: oneClassOrAnother()}" ng-switch-when="1">1</div>
Where oneClassOrAnother() returns either true or false and "class1" is the name of the class.
Here's a working example of using ng-class and ng-switch-when together: http://plnkr.co/edit/n86SKEktRcPnBy05o8eZ?p=preview
Angular ngClass docs: https://docs.angularjs.org/api/ng/directive/ngClass
I think its all fine with your code, look at this plunk, I reproduced it and its working. Compare this to your code, maybe you have forgotten about controller?
http://plnkr.co/edit/Lz7L3S?p=preview
Only difference i guess is the fact, that I initiated sw from controller, not from view.
<div ng-switch on="sw">
I'm fairly new to AngularJS and I can't seem to find a way to do this appropriately. I created a custom directive to Apply a function a pass in the row Index. However, I can't seem to think of the way to show items in a row. What would be the best way to do this? I want to show specific and hide a target row via controller.
HTML:
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-class="{hidden: hidden[{{$index}}]}">
Item
</div>
</div>
My Directive:
scope.$apply(function () {
scope.$parent.showItem(index);
});
Controller:
$scope.teamDrop = function(index) {
$scope.hidden[index] = false;
};
You can use the ng-show and ng-hide directives to hide and show elements.
You can also use the ng-if directive to remove elements from the dom.
For your example I'd change your ng-class to an ng-hide
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-hide="hidden[$index]">
Item
</div>
</div>
You also don't need to use the {{}} syntax in the ng-class becausue it's already expecting an angular expression, that's for data binding.