cannot manipulate string with angular filter

Question

I am an angular newbie and I study the book "Angular JS by example" and I try to create my own filter. (pp. 93-94).

In my controller this is the string I want to manipulate procedure: "Assume a position, with feet together .\Slightly bend your knees, .\While in air, bring your legs out .\ As you are moving your legs outward"

and then I sanitise it

$scope.trustedHtml = $sce.trustAsHtml($scope.currentExercise.details.procedure);

Since this is an SPA , the filter is in the description-panel.ejs file, that is inside workout.ejs, that is inside index.ejs

description-panel.ejs has

<div class="panel-body" ng-bind-html ="trustedHtml | myLineBreakFilter"> </div>

workout.ejs has

<div id="video-panel" class="col-sm-3" ng-include="'description-panel.ejs'">

and index.ejs has

<script src="/javascripts/7MinWorkout/filters.js"></script>

filter.js has the filter

angular.module('7minWorkout').filter('myLineBreakFilter', function () {
    return function (input) {
        var str = input;
        var br = "</br></br>";
        var position = str.indexOf(".");

        var output = [str.slice(0, position), br, str.slice(position)].join('');    

        return output ; 
    }
});

The filter should replace all the . with </br></br>.

This does not work and I get no text at all in my front-end. I get this error in the console

TypeError: str.slice is not a function  at filters.js:22

Shouldn't basic js stuff like str.slice be supported out of the box? What am I missing?

Thanks

Try and console.log(str) and/or console.log(typeof str) to see whether it's string as expected — Fissio
– Fissio, Commented Aug 19, 2015 at 11:24
@Fissio typeof is "object" and str is the string , with only the last period replaced by </br></br>. But I still cannot see anything on the page — slevin
– slevin, Commented Aug 19, 2015 at 12:34

Juned Lanja · Accepted Answer · 2015-08-19 13:15:44Z

1

$sce.trustAsHtml() return you an object so slice will not work on it.You can pass that object to $sce.getTrustedHtml(object) to obtain the original value and then can apply slice on it.

    angular.module('7minWorkout').filter('myLineBreakFilter', function ($sce) {
return function (input) {

var str = $sce.getTrustedHtml(input);
var br = "</br></br>";
var position = str.indexOf(".");

var output = [str.slice(0, position), br, str.slice(position)].join('');    

return $sce.trustAsHtml(output) ; 
}
});

edited Aug 19, 2015 at 13:15

answered Aug 19, 2015 at 11:27

Juned Lanja

1,48410 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

slevin Over a year ago

Good idea, but no, it does not work, I get ReferenceError: $sce is not defined, which is normal. I could put the filter inside the controller, but will cause more fuss, plus I think the filter on the view is way better and more logic, seperating tasks. I'm still working on it. Any ideas?

Juned Lanja Over a year ago

have you added $sce as a dependency?

slevin Over a year ago

@Jungu At the controller ? Yes :

angular.module('7minWorkout').controller('WorkoutController',['$scope', '$interval','$location','$sce',function($scope, $interval,$location,$sce){

. But the controller and the filter are in seperate files. I guess I could do $scope.trustedHtml = $sce.getTrustedHtml($scope.currentExercise.details.procedure); in the controller and leave the filter as is. But I dont know if this is right, because the page gets an text not a object. Also, there are no breaks

Juned Lanja Over a year ago

in filter inject $sce as i have done in answer .filter('myLineBreakFilter', function ($sce) {

slevin Over a year ago

@Jungu I did and now I get no errors. After ar str = $sce.getTrustedHtml(input); I do console.log("str "+str); console.log("typeof str "+typeof str); . Type is "string" and the string has breaks, but in the page I see no breaks. Now I am confused, I am sorry, but I dont get what went wrong

|

Mahantesh Kumbar · Accepted Answer · 2016-01-13 09:29:13Z

0

Try this add this before the splice

str.toString();
str.splice(//pass parameters);

answered Jan 13, 2016 at 9:29

Mahantesh Kumbar

2551 silver badge10 bronze badges

Collectives™ on Stack Overflow

cannot manipulate string with angular filter

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related