I want to do a similar thing done here https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible2&stacked=h with a small change using angular js.
Let's say I have a variable test, Now my href(Simple collapsible) will display only when the test has some string otherwise no href displayed.
I tried below condition in my angular template:
Simple collapsible
[[test]]
Note: I am actually having a condition like this https://django-angular.readthedocs.io/en/latest/template-sharing.html but it doesn't include how to collapse ng-href.
Any help would be really appreciated.
Related
I am a beginner in angularJS, and do not write good English.
I have the following code
<span class="custom-marker-price" ng-bind="property.rentValue"></span>
How can I hide the element span (IMG1) when load angular...
Well, if im correct you should use ng-hide property.
Inside of span after class add ng-hide='hideIt'
and inside of controller at first line put:
$scope.hideIt=false;
And when you want to hide it just put boolean variable in true:
$scope.hideIt = true;
You could also use ngif property.
Hope this help!
ngCloak
directive in module ng
The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
— AngularJS ng-cloak Directive API Reference
Right now I am trying to figure out how to create an anchor element automatically for some data in a template, and I am basically calling this:
{{linkify(section.uri)}}.
I know that is wrong, but what is the right way to do this?
Also, what sort of terminology should I be using to describe this problem?
create an html anchor element and use angular ng-href to set the url with a JS value
<a ng-href="{{section.url}}">link</a>
https://docs.angularjs.org/api/ng/directive/ngHref
So I have a some HTML where I am pulling a value from a file and using it for a link, like so:
page
Now I need a popup to display that page when clicked, using a basic script and a line like this:
page
However, I need the popup page value to be pulled from the file as well, so something like this:
page
But the problem I am having is that the variable does not resolve in the popitup() call, I assume because of the apostrophes basically telling it to take that literally. What could fix this and make it resolve?
This is in conjunction with AngularJS
I'm going to assume that the first snippet you posted. If it works, great; this answer should work for you. If not, well, I don't know - more information would be needed, like a fiddle illustrating the problem or know what templating engine you're using.
Since the function "popitup" needs the save value as the href of the link, why not pass in the href of the link?
page
ngClick is the way to deal with that kind of things if you are using Angular.
This was anserwed here, and if you really need the onclick attribute: how to pass angular js variable inside onclick function as parameter
I have a web application thats written mostly in Jquery, that is essentially a dashboard that a user can add any number of custom widgets to. I have the users currently added widgets, so when its loaded up I masically append each widget to the DOM. I want to work on converting this to an Angular application however im stumbling on one major issue.
1)I can recreate each widget as a directive, that will work nicely. However what I'm struggling with is how to add each widget that a user has setup on load. My first attempt at solving this was to create a generic widget directive, and doing an ng-repeat, and dynamically assigning the widget its controller/templateUrl.
In theory this seems great however I ran into some issues with not being able to dynamically pass the controller name via attribute. if I hard coded a string value it would work, but wouldnt a data-bound attribute in the ng-repeat. Example below does not work.
<quidget ng-dynamic-controller="quidget.QuidgetName" ng-repeat="quidget in tab.quidgets track by $index"></quidget>
if instead of quidget.QuidgetName I passed in the actual name of the controller, it would work...like so
<quidget ng-dynamic-controller="quidget1Controller" ng-repeat="quidget in tab.quidgets track by $index"></quidget>
Does anyone have any insight on how I can go about accomplishing this?
Instead of passing the controller name dynamically to the directive you can define the name of the controller in the template of that widget (this is assuming that every widget has a different template). For example you just pass the widget name to the controller:
<quidget ng-repeat="quidget in quidgets" name="quidget.name">
Next, in your quidget directive's template you conditionally load the template based on the name of the widget, some thing like this:
<div ng-switch on="name">
<div ng-switch-when="widget1" >
<ng-include src="'widget1.html'"></ng-include>
</div>
<div ng-switch-when="widget2" >
<ng-include src="'widget2.html'"></ng-include>
</div>
</div>
and inside each widget's template you define the Controller name like this:
<p ng-controller="widget1Ctrl">This is widget1.</p>
Here is a working plunker that illustrates the whole idea: http://plnkr.co/edit/dBqHRqChy17U8pFI9PXH
I know it's kind of a messy solution and I am pretty sure this can be accomplished in a much simpler manner.
I have few lines of description on my page. On the page loads I want to show only 150 characters with a link Read More on click of which I want to show the rest of the description and Read Less link. In fact I want to toggle between Read More/Less. I want do this by creating a directive not by using limitTo filter provided by AngularJs. I have gone through the link Create read more link in AngularJS but it did not help me. I don't have code example or jsfiddle because I don't know how to start, I am new to AngularJs. Any help would be appreciated. Thanks in advance.
I've had great success wrapping jQuery dotdotdot with a simple Angular directive. I can't drop in the exact code, but the core of the directive:
Is an A (attribute) directive
Requires ngBindHtml
Has a link function:
Where a $scope.truncated variable is set to keep track of whether dotdotdot has been applied
That watches element.html() for changes, and if it changes and dotdotdot has not been applied, applies it by calling element.dotdotdot() and flips the truncated flag