Hi I am writing a filter which takes and array and returns a comma delimited string.
When i append some HTML it is not showing in the output.
Below is my code
$scope.authors = [{ "authorName": 'Robin', "price": 40, "link": 'http://www.google.com' },
{ "authorName": 'Chetan', "price": 400, "link": 'http://www.bing.com' },
{ "authorName": 'Jack Wilson', "price": 450, "link": 'http://www.facebook.com'}
]
My Filter
myApp.filter('formatAuthorName', function () {
return function (input) {
var str = [];
var totalString = '';
if (input.length > 1) {
for (var i = 0; i < input.length; i++) {
var name = input[i];
**str.push('<a href='**name.link**'>'+name.authorName+'</a>');**
}
totalString = str.join(', ');
return totalString;
}
return totalString;
};
});
Also how to bind href to link from Scope ??.
Thanks
For outputting HTML that interacts with scope, a directive is more suitable than a filter.
This answer expands on the solution originally proposed by ajk.
Demo Plunker
Directive
app.directive('formatAuthorNames', function() {
return {
restrict: 'A',
scope: { authors: '=' },
template:
'<span ng-repeat="author in authors">
<a ng-href="{{ author.link }}">{{ author.authorName }}</a>
<span ng-if="$index < authors.length-1">, </span>
</span>',
link: function(scope, elem, attr) {
// access scope here
}
}
});
HTML
<body ng-app="app" ng-controller='MyController'>
<div authors="authors" format-author-names></div>
</body>
Use $sce in your filter if you want to render html:
<div ng-bind-html="authors | formatAuthorName"></div>
JS:
app.filter('formatAuthorName', ['$sce',
function($sce) {
return function(input) {
var str = [];
var totalString = '';
if (input.length > 1) {
for (var i = 0; i < input.length; i++) {
var name = input[i];
str.push('<a href=' + name.link + '>' + name.authorName + '</a>');
}
totalString = str.join(', ');
}
return $sce.trustAsHtml(totalString);
};
}
]);
DEMO PLUNKER
I'm not sure that a filter is what you're actually looking for here. You will probably be better served by using ng-repeat in combination with ng-href. Something like this:
<div ng-repeat="author in authors">
<a ng-href="{{ author.link }}">{{ author.authorName }}</a>
</div>
try using ng-href instead of a filter
https://docs.angularjs.org/api/ng/directive/ngHref
Hope this helps.
Related
If you have a career-box directive like this:
<div ng-repeat='career in careers' career-box ng-click="toggleSelected()"> {{ career.name }} </div>
The directive:
app.directive('careerBox', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.selected = false,
scope.toggleSelected = function() {
element.toggleClass('selected');
if(scope.selected) {
scope.selected = false;
} else {
scope.selected = true;
}
}
}
};
});
Every time a career-box is selected I would like to count the total number of career-boxes selected (selected=true) and enable a button if they are more than 0.
How can I do that in the code?
There is no need to write a custom directive. It can be done with Angular core directives:
vm.selectedCount = function(item) {
var count=0;
for (let i=0; i<vm.careers.length; i++) {
if (vm.careers[i].selected) count++;
}
return count;
}
<div ng-repeat='career in careers'
ng-click="career.selected = !career.selected"
ng-style="{'background-color': career.selected?'yellow':''}">
{{ career.name }}
</div>
<hr>Selected count: {{selectedCount()}}
The DEMO on PLNKR
The DEMO
angular.module("myApp",[]);
angular.module("myApp").controller("myVm", function($scope) {
var vm = $scope;
vm.careers = [ {name: "Police Officer", value: 1},
{name: "Nurse", value:2},
{name: "Doctor", value:3},
];
vm.selectedCount = function(item) {
var count=0;
for (let i=0; i<vm.careers.length; i++) {
if (vm.careers[i].selected) count++;
}
return count;
}
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myVm">
<h1>Selected Div Example</h1>
<div ng-repeat='career in careers'
ng-click="career.selected = !career.selected"
ng-style="{'background-color': career.selected?'yellow':''}">
{{ career.name }}
</div>
<hr>Selected count: {{selectedCount()}}
</body>
First, you need to have a select element with the multiple property:
<select name="carers" multiple id="multipleCarers" ng-model="data.multipleCarers">
<option ng-repeat="career in careers" value="{{career.value}}">
{{career.name}}
</option>
</select>
After of that, you can get the count of options selected:
{{data.multipleCarers.length}}
I am using lightGallery for a website and I wanted to add a "load more" button to the gallery page, mostly for faster loading on mobile phones. I found various methods and tried them. Most of them don't work and/or doesn't suit my need for loading the elements on request.
One of them was with AngularJS:
var DemoApp = angular.module("DemoApp", []);
DemoApp.controller("DemoController",
function DemoController($scope) {
$scope.quantity = 0;
$scope.temp = [];
$scope.loadMore = function () {
for (i = $scope.quantity; i <= $scope.quantity + 1; i++) {
$scope.temp.push($scope.images[i]);
}
$scope.quantity = i;
}
$scope.images = [{
"src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13244856_238092939903469_3778800896503555327_n.jpg?oh=e539748b060ba0cb43852314e2fdef0b&oe=57F01511"
}, {
"src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13263891_238096316569798_4073904852035872297_n.jpg?oh=91a76b3515ac628706b912fdd3e9a346&oe=585C3DD1"
}, {
"src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13260007_238096336569796_6324932140560503740_n.jpg?oh=1795ba25c4604dced3cdcc91b9729cc7&oe=5820EE5A"
}, {
"src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/12871473_238096353236461_8115646425269026926_n.jpg?oh=b8958326d24a1a649e6a40adf29b062b&oe=582BFD38"
}, {
"src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13256520_238096376569792_9057528716929719317_n.jpg?oh=a6bc66f75992c88260ae35bd4dbc9ff1&oe=5856F934"
}, {
"src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13254297_238096389903124_1429633590050411734_n.jpg?oh=5e8c94a0b6a77dea110704a5727e0ee5&oe=5819B551"
}, {
"src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13267713_238096416569788_8740461856631991826_n.jpg?oh=739e3268996e498f65867b314265250b&oe=585E4C93"
}];
$scope.loadMore();
});
And this is my HTML mark up:
<div class="col-xs-12">
<div ng-app="DemoApp" ng-controller="DemoController">
<div id="fotoalbum" class="col-thumb-wrap">
<div class="col-thumb" ng-repeat="image in temp" data-src="{{image.src}}">
<a href="{{image.src}}">
<i class="thumb" style="background-image: url({{image.src}});"></i>
</a>
</div>
</div>
<button class="btn btn-default" ng-click="loadMore()">Ik wil meer</button>
</div>
</div>
The "load more" button it self worked, however it broke the lightGallery itself.
Example: http://cytex.nl/projects/jk-installaties/album2.php
Then I found the solution for making lightGallery work with AngularJS in this StackOverflow question
I tried to combine the two but it still doesn't work. Now lightGallery gets fired up OK, but the "load more" button doesn't do anything!
Example: http://cytex.nl/projects/jk-installaties/album1.php
var DemoApp = angular.module('DemoApp', []);
DemoApp.controller('DemoController',
function DemoController($scope, $sce) {
$scope.total = 0;
$scope.temp = [];
$scope.loadMore = function () {
for (x = $scope.total; x <= $scope.total + 1; x++) {
$scope.temp.push($scope.photos[x]);
}
$scope.total = x;
}
$scope.photos = [{
fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13244856_238092939903469_3778800896503555327_n.jpg?oh=e539748b060ba0cb43852314e2fdef0b&oe=57F01511'
}, {
fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13263891_238096316569798_4073904852035872297_n.jpg?oh=91a76b3515ac628706b912fdd3e9a346&oe=585C3DD1'
}, {
fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13260007_238096336569796_6324932140560503740_n.jpg?oh=1795ba25c4604dced3cdcc91b9729cc7&oe=5820EE5A'
}, {
fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/12871473_238096353236461_8115646425269026926_n.jpg?oh=b8958326d24a1a649e6a40adf29b062b&oe=582BFD38'
}, {
fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13256520_238096376569792_9057528716929719317_n.jpg?oh=a6bc66f75992c88260ae35bd4dbc9ff1&oe=5856F934'
}, {
fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13254297_238096389903124_1429633590050411734_n.jpg?oh=5e8c94a0b6a77dea110704a5727e0ee5&oe=5819B551'
},{
fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13267713_238096416569788_8740461856631991826_n.jpg?oh=739e3268996e498f65867b314265250b&oe=585E4C93'
}];
$scope.loadMore();
for (var i = 0; i < $scope.photos.length; i++) {
$scope.photos[i].fullres = $sce.trustAsResourceUrl($scope.photos[i].fullres);
}
})
.directive('lightgallery', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
if (scope.$last) {
element.parent().lightGallery({
showThumbByDefault: false
});
}
}
};
});
I am very new to AngularJS,so I'm sorry if this is a really stupid question. Could you guys help to identify the problem and maybe pointers on how to tackle this?
Append this fragment of your code to the last row of loadMore function:
for (var i = 0; i < $scope.photos.length; i++) {
$scope.photos[i].fullres = $sce.trustAsResourceUrl($scope.photos[i].fullres);
}
This part should be run each time you add an item to the array, It means this should be run each time the function loadMore triggers.
Hope this will be helpfull. Regards.
For others who ran into this issue:
The answer of Ramin Esfahani is of course correct. But you also have to destroy the lightGallery data ever time the "Load More" button is clicked. This is in done in the directive part. Of course change the "#fotoalbum" to your own ID or class. This is the code:
.directive('lightgallery', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
if (scope.$last) {
element.parent().lightGallery({
showThumbByDefault: false
});
$('#LoadMore').on('click', function(){
$('#fotoalbum').data('lightGallery').destroy('true');
$('#fotoalbum').lightGallery({
showThumbByDefault: false
});
});
}
}
};
})
I have an array with multiple objects, similar to this:
[
{ title: 'abc', 'pre': '<div class="class1"><div class="class2">', 'post': '</div>' },
{ title: 'def', 'pre': <div class="class3">', 'post': '</div>' },
{ title: 'ghi', 'pre': '<div class="class3">', 'post': '</div></div>' }
]
<div ng-repeat="item in myVar">
<div ng-bind-html="item.pre" />{{ item.title }}<div ng-bind-html="item.post" />
</div>
The above does not work (I have to open two div's in one, and close in two other items in that array, as illustrated above). The problem is that ng-bind-html needs to be bound to an element, which I cannot use, neither does a filter work:
<div ng-repeat="item in myVar">
{{ item.pre | trust }}{{ item.title }}{{ item.post | trust }}
</div>
angular.module('myModule').filter('trust', ['$sce',function($sce) {
return function(value, type) { return $sce.trustAsHtml; }
}]);
Any ideas?
You'll have to perform the concatenation pre-view, trust that (or turn on ngSanitize, potentially better-yet), then inject it.
As far as I know, there's no way to inject a partial HTML element the way you're trying to.
In your controller:
$scope.items = [...];
for (var i = 0; i < $scope.items.length; i++) {
var e = $scope.items[i];
e.concatenated = $sce.trustAsHtml(e.pre + e.title + e.post);
}
Then in your view:
<div ng-repeat="item in items">
<div ng-bind-html="item.concatenated" />
</div>
Of course, you'll probably want ngSanitize turned on, just to avoid any issues with e.title. That is, if someone entered a title of <script>alert('ahh!')</script>, that would end up being trusted.
Your version did not work because of how ngBindHtml is written:
var ngBindHtmlDirective = ['$sce', '$parse', '$compile', function($sce, $parse, $compile) {
return {
restrict: 'A',
compile: function ngBindHtmlCompile(tElement, tAttrs) {
var ngBindHtmlGetter = $parse(tAttrs.ngBindHtml);
var ngBindHtmlWatch = $parse(tAttrs.ngBindHtml, function getStringValue(value) {
return (value || '').toString();
});
$compile.$$addBindingClass(tElement);
return function ngBindHtmlLink(scope, element, attr) {
$compile.$$addBindingInfo(element, attr.ngBindHtml);
scope.$watch(ngBindHtmlWatch, function ngBindHtmlWatchAction() {
// we re-evaluate the expr because we want a TrustedValueHolderType
// for $sce, not a string
element.html($sce.getTrustedHtml(ngBindHtmlGetter(scope)) || '');
});
};
}
};
}];
It injects using element.html(...), which needs a complete HTML element.
I found example of infinite scrolling and tried to perform it the same, but after fixing all mistakes I've found it still doesn't work.
Here's the directive:
module.exports = /*#ngInject*/
function scrollDirective($rootScope) {
return {
link: function (scope, elm, attr) {
var raw = elm[0];
elm.bind('expressly', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.scrollDirective);
}
});
}
};
};
Then how it goes on in controller (I have JSON-data in promise)
module.exports = /*#ngInject*/
function cardController($scope, dataFactory) {
var promise = dataFactory.get();
promise.then(function(data) {
$scope.data = data;
$scope.items = [];
//$scope.items.push($scope.data[0]);
var counter = 0;
$scope.loadMore = function() {
for (var i = counter; i < counter+9; i++) {
$scope.items.push($scope.data[i]);
}
counter += 9;
};
$scope.loadMore();
}, function(reason) {
console.log('Failed: ' + reason);
});
};
And finally html:
<div class="mdl-grid" scroll-directive="loadMore()">
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone" ng-repeat="item in items">
<md-card>
<img ng-src="{{ item.url }}" class="md-card-image">
<md-card-content>
<md-icon ><i class="material-icons md-36 md-album">photo_album</i></md-icon>
<h3 class="md-title">{{ item.title }}</h3>
</md-card-content>
</md-card>
</div>
</div>
Actually it turned up pretty simple. In directive instead of elm I used $document and pass parameter i to the function. After exploring the guts of i, I found all parameters I needed through i.target.activeElement. Here is the solution:
function scrollDirective($rootScope,$document) {
return {
link: function (scope, elm, attr) {
var raw = elm[0];
$document.bind('scroll', function (i) {
if (i.target.activeElement.scrollTop+i.target.activeElement.offsetHeight +5>= i.target.activeElement.scrollHeight){
scope.$apply(attr.scrollDirective);
}
});
}
};
};
My intent was to create a directive that could rearrange (not reorder) its child elements into a Bootstrap CSS Grid, but I am having a lot of difficulty getting access to the child elements.
I've tried a lot of different things and have researched Compile vs Link vs Controller directive options. I think I might have to change the 'compile' to 'link' in my directive to get this to work, but I am unsure how to do that.
I have an AngularJS directive on GitHub that takes an array or object of parameters to render a simple or complex grid.
In the example below you can see the layoutOptions.data = [3, 4] which means the grid will have 3 cells in the top row and 4 in the second. This is working well.
The second step is that I would like to render some divs as child elements of the directive and the directive will place these in the cells of the grid as it is created. This is shown by the layoutOptions.content = ['apple', 'orange', 'pear', 'banana', 'lime', 'lemon', 'grape'] but this needs to be de-coupled so that it could be literally anything.
HTML Input
<div ng-app="blerg">
<div ng-controller="DemoCtrl">
<div class="container" hr-layout="layoutOptions">
<div ng-transclude ng-repeat="fruit in layoutOptions.content">{{fruit}}</div>
</div>
</div>
</div>
Desired (not actual) Output
Actual output is as below, but does not include the inner DIVs with fruit names
<div class="container hr-layout" hr-layout="layoutOptions">
<div class="row">
<div class="col-md-4"><!-- from ng-repeat --><div>apple</div></div>
<div class="col-md-4"><!-- from ng-repeat --><div>orange</div></div>
<div class="col-md-4"><!-- from ng-repeat --><div>pear</div></div>
</div>
<div class="row">
<div class="col-md-3"><!-- from ng-repeat --><div>banana</div></div>
<div class="col-md-3"><!-- from ng-repeat --><div>lime</div></div>
<div class="col-md-3"><!-- from ng-repeat --><div>lemon</div></div>
<div class="col-md-3"><!-- from ng-repeat --><div>grape</div></div>
</div>
</div>
And a jsFiddle that uses it here: http://jsfiddle.net/harryhobbes/jJDZv/show/
Code
angular.module('blerg', [])
.controller('DemoCtrl', function($scope, $timeout) {
$scope.layoutOptions = {
data: [3, 4],
content: ['apple', 'orange', 'pear', 'banana', 'lime', 'lemon', 'grape']
};
})
.directive("hrLayout", [
"$compile", "$q", "$parse", "$http", function ($compile, $q, $parse, $http) {
return {
restrict: "A",
transclude: true,
compile: function(scope, element, attrs) {
//var content = element.children();
return function(scope, element, attrs) {
var contentCount = 0;
var renderTemplate = function(value, content) {
if (typeof content === 'undefined' || content.length <= contentCount)
var cellContent = 'Test content(col-'+value+')';
else if (Object.prototype.toString.call(content) === '[object Array]')
var cellContent = content[contentCount];
else
var cellContent = content;
contentCount++;
return '<div class="col-md-'+value+'">'+cellContent+'</div>';
};
var renderLayout = function(values, content) {
var renderedHTML = '';
var rowCnt = 0;
var subWidth = 0;
angular.forEach(values, function(value) {
renderedHTML += '<div class="row">';
if(Object.prototype.toString.call(value) === '[object Array]') {
angular.forEach(value, function(subvalue) {
if(typeof subvalue === 'object') {
renderedHTML += renderTemplate(
subvalue.w.substring(4), renderLayout(subvalue.d)
);
} else {
renderedHTML += renderTemplate(subvalue.substring(4));
}
});
} else {
if(value > 12) {
value = 12;
} else if (value <= 0) {
value = 1;
}
subWidth = Math.floor(12 / value);
for (var i=0; i< value-1; i++) {
renderedHTML += renderTemplate(subWidth);
}
renderedHTML += renderTemplate((12-subWidth*(value-1)));
}
renderedHTML += '</div>';
rowCnt++;
});
return renderedHTML;
};
scope.$watch(attrs.hrLayout, function(value) {
element.html(renderLayout(value.data));
});
element.addClass("hr-layout");
};
}
};
}]);
This may help - http://jsfiddle.net/PwNZ5/1/
App.directive('hrLayout', function($compile) {
return {
restrict: 'A',
// allows transclusion
transclude: true,
// transcludes the content of an element on which hr-layout was placed
template: '<div ng-transclude></div>',
compile: function(tElement, tAttrs, transcludeFn) {
return function (scope, el, tAttrs) {
var data = scope.$eval(tAttrs.hrLayout),
dom = '';
transcludeFn(scope, function cloneConnectFn(cElement) {
// hide the transcluded content
tElement.children('div[ng-transclude]').hide();
// http://ejohn.org/blog/how-javascript-timers-work/
window.setTimeout(function() {
for(var row = 0; row < data.data.length; row++) {
dom+= '<div class="row">';
for(var col = 0; col < data.data[row]; col++) {
dom+= '<div class="col-md-' + data.data[row] + '">' + tElement.children('div[ng-transclude]').children(':eq(' + ( row + col ) + ')').html() + '</div>';
}
dom+= '</div>';
}
tElement.after(dom);
}, 0);
});
};
}
};
});
Your approach looks like too complex. Maybe you should use ngRepeat directive http://docs.angularjs.org/api/ng.directive:ngRepeat and orderBy filter http://docs.angularjs.org/api/ng.filter:orderBy insted of updating html of element every time when hrLayout was updated?