Anyone knows how to customize the layout of ngTagsInput autocomplete?
<tags-input ng-model="tags" placeholder="neues Tag">
<-- Customize this autocomplete layout --->
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
I want to embed something like this template in the autocomple result
<div> {{ Category }} : {{ TagName }} </div>
There is a built in support for custom autoComplete template now.
you can change the default autocomplete template by setting the template option:
<auto-complete source="loadTags($query)" template="/path/custom-template"></auto-complete>
or
<auto-complete source="loadTags($query)" template="my-custom-template"></auto-complete>
If using inline template you can specify like this :
<script type="text/ng-template" id="my-custom-template">
...
</script>
Official documentation is here.
http://mbenford.github.io/ngTagsInput/documentation/guides/custom-templates
You have three options:
Override the $templateCache by physically having the files on the folder, which for this library would be:
$templateCache.put('ngTagsInput/tags-input.html', ' ... '
$templateCache.put('ngTagsInput/auto-complete.html', ' ... '
Use a template script on your html:
<script id="ngTagsInput/tags-input.html" type="text/ng-template">
<div>Whatever here</div>
</script>
Inject the $templateCache service and override the template on your module
angular.module('myApp',[])
.run(['$templateCache', function($templateCache){
$templateCache.put('ngTagsInput/tags-input.html',
<div>Whatever here</div>
);
}]);
Currently there's no built-in support for that, but you can always get the source code and customize it to your needs.
There is an open issue for that feature, though. You can keep track of its progress here.
Custom templates are now supported. Irfad Ibrahim's answer provides additional info.
Related
I use AngularJS tooltip and it works fine. Now I will have a condition wheather tooltip should be shown or not. Is there any attribute to do this?
<div data-popover-template="'chartTimePopoverTemplate.html'" data-popover-trigger="mouseenter" data-ng-repeat="scheduleIntervalContainer in ...
<script type="text/ng-template" id="chartTimePopoverTemplate.html">
<div">
{{scheduleIntervalContainer.startTime}} - {{scheduleIntervalContainer.endTime}}
</div>
</script>
you can use
popover-is-open="booleanValue"
as shown in the docs here.
I got this code from a Foundation for Apps page template here: Zurb
the code:
<div class="accordion-item" ng-class="{'is-active': active}">
<!-- {{ varialbe }} -->
<div class="accordion-title" ng-click="activate()">{{ title }}</div>
<div class="accordion-content" ng-transclude></div>
</div>
I realize it's easy enough to use an accordion but that's really not my question. After a little research I found that the above code is using Angular tag templating. However, I'm not sure how I can use this in my code Or why I would. This has to do with dynamically naming the title for what will be an active item in the accordion? In what scenario would I define the title variable being used above? Should the content simply be placed in the div?
using foundation template in your own app.
This is the code from foundation-apps.
$templateCache.put('components/accordion/accordion-item.html',
'<div class="accordion-item" ng-class="{\'is-active\': active}">\n' +
' <div class="accordion-title" ng-click="activate()">{{ title }}</div>\n' +
' <div class="accordion-content" ng-transclude></div>\n' +
'</div>\n' +
'');
$templateCache.put puts the template in its memory and you can get to it with $templateCache.get('components/accordion/accordion-item.html').
If you want to use it in a directive, simply point your templateUrl to "components/accordion/accordion-item.html"
angular
.module('app')
.directive('myDirective', function() {
return {
templateUrl: 'components/accordion/accordion-item.html'
};
})
override foundation's template
if you want to use your own template with foundation's javascript, simply use $templateCache.put().
$templateCache.put('components/accordion/accordion-item.html',
'my custom template');
I have created discussion forum application in angularjs. Once the user clicked the reply button on the post, I want to show the editor which is in the separate html file. How can I include that template on clicking the ng-click under that specific post.
How about a combination of ng-include with ng-if?
If you want to inject a template based on a certain condition, you can do it like this:
<div ng-include="'template.html'" ng-if="yourCondition"> </div>
where template.html is your filename and yourCondition should be an boolean expression.
Here is a plnkr to demonstrate: http://plnkr.co/edit/m50nKigoOWYwuczBIQdQ?p=preview
As suggested above we can use combination of ng-if and ng-include to achieve require functionality :
<html ng-app="includeApp">
<head>
<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="AppController.js"></script>
</head>
<body ng-controller="AppCtrl">
<button ng-click="injectReply()">Include Reply</button>
<div ng-include="'reply.html'" ng-if="isReplyIncluded"></div>
</body>
</html>
Now code containing AppController.js :
angular.module('includeApp',[])
.controller('AppCtrl',['$scope',function($scope){
$scope.isReplyIncluded=false;
$scope.injectReply= function (){
//add reply.html by making this variable true
$scope.isReplyIncluded=true;
}
}]);
Reply.html
<div>
You can add your editor html content here
</div>
I am trying to create a tooltip based from from this post
Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding
I successfully created the popup but I have trouble delivering the content to my popover.html
I added this to my script.js
var app = angular.module('myApp', ['ui.bootstrap', 'ian.bootstrap']);
app.controller('myCtrl', function ($scope) {
$scope.item = {
title: 'Original Title',
content:'content 1' //newly added item
};
$scope.text = 'Click me';
});
and I want to display it in my popover.html
<div class="popover-content">
{{item.content}}
</div>
It doesn't show anything. Can someone help me about it? thanks a lot!
my plunker
http://plnkr.co/edit/5pBZ9qq79OPl2tGEeYYV?p=preview
Here is your updated working Plunkr
Basically you have to pass the attr iantooltip-content with the binding of the content item, not the raw text, and after in the directive pass in the directive isolate scope options the binding of the content like :
iantooltipContent: '='
Just change the appenToBody variable and you're done.
You should read the docs for more infos about Angular directive :)
You can add the ng-controller in your div and then specify the controller name like so :
<div class="popover-content" ng-controller='myCtrl'>
{{item.content}}
</div>
Before the use cases, the basic syntax to create a custom directive.
For all the code samples in this page I started from the angular-seed template.
Starting from the angular-seed skeleton is quite easy to extract a model to begin to implement custom directives.
<html ngApp="myApp">
...
<div my-first-directive></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/directives.js"></script>
...
</html>
How do I make a jsfiddle out of the following code:
<html>
<head>
</head>
<body>
<div ng-app ng-controller="MainCtrl">
<ul>
<li ng-repeat="num in nums">
{{num}}
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" charset="utf-8">
function MainCtrl($scope) {
$scope.nums = ["1","2"];
}
</script>
</body>
</html>
My non working attempt: http://jsfiddle.net/zhon/3DHjg/ shows nothing and has errors.
You need to set some things up in jsFiddle for this to work.
First, on the left panel, under "Frameworks & Extensions", select "No wrap - in <body>".
Now, under "Fiddle Options", change "Body tag" to <body ng-app='myApp'>
In the JS panel, initiate your module:
var app = angular.module('myApp', []);
Check it out: http://jsfiddle.net/VSph2/1/
#pkozlowski.opensource has a nice blog post about how to use jsFiddle to write AngularJS sample programs.
You've defined your controller in a function scope that is not accessible to angular (angular is not yet loaded). In other words you are trying to call angular library's functions and helpers like below example before getting angular library loaded.
function onload(){
function MainCtrl(){}
}
To resolve this, switch your angular load type to be No wrap - in <body> like shown in screenshot.
here is a working example in jsfiddle
Click JAVASCRIPT button, choose angular version and place where u want include loaded script:
Then click HTML button and add ng-app in body tag. Its all:)
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .And no wrap (body) is required too.
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/cloudnine/trgrjwf1/7/
Since Angular 1.4.8 has been chosen by JSFiddle as the top option for Angular V1 in its JAVASCRIPT setting panel, more restriction applies: both ng-app and ng-controller should be declared in HTML to make it work.
Sample HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="sample" placeholder="type something here...">
<span>{{sample}}</span>
</div>
Sample JS:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {});
https://jsfiddle.net/y170uj84/
Also tested with the latest Angular 1.6.4, by setting as External Resource.
For little experiments in angular 5, you can use https://stackblitz.com/.
This site is used in angular documentation to run live demo. For example, https://stackblitz.com/angular/eybymjopmav