Use ng-show to replace a character in a string

Question

Problem: I would like to be able to replace & amp; with & by using ng-show.

So I have a angular expression "e.Example" that contains the following strings {Camp & Stuff, Stuff $ Camp}. When I generate the string in my form, it represents "&" as "& amp;" and so forth.

I would like to be do something like:

<span ng-show="e.Example ==='$' replace it with someting else"></span>

How can I achieve that using ng-show? I know in C# I can use .Contains and .Replace. I was wondering if their is something similar in angularjs

@Lansana

I tried the following:

<span ng-show="e.Specialty === '&amp;' && doSomethingTo(e.Specialty)"></span>

However, when I look at debugger, it shows the & char and not '& amp;' which the '&' appears when I click sumbit and display results

Update: Tried the following:

    <span ng-show="doSomethingTo()"></span>

       function doSomethingTo(val){
           val.property = '&';
           return true;
       }

@CodeSpark yes, I have use ng-bind-html and ngSanitize and it does not work for me. it crashes. So I am wondering if I can do something with ng-show — Robert, Sep 08 '17 at 18:15
I think following link can help you out https://stackoverflow.com/questions/30355025/convert-json-amp-to-in-angularjs — Code Spark, Sep 08 '17 at 18:31
@CodeSpark: I tried the following {{e.Specialty | ampersand}} and for the script: app.filter('ampersand', function(){ return function(e){ return e ? e.replace(/&/, '&') : ''; } }); — Robert, Sep 08 '17 at 19:10
@CodeSpark: I am not sure what to replace the input. My guess would be the span tag or would it be at the form when the user selects which one to use — Robert, Sep 08 '17 at 19:12
This is the third time today you've asked this duplicate question. https://stackoverflow.com/questions/46120419/how-to-use-sanitize-on-html-entity — , Sep 08 '17 at 20:13
@Robert please stop asking duplicate questions. Edit your existing questions instead. And please stop thanking me for moderating your questions while ignoring everything said. — , Sep 08 '17 at 20:24
@Amy Not. Different Questions. Was curious if it couldnt be achieve using ng-bind-html, if I could try ng-show. and have a good day — Robert, Sep 08 '17 at 20:26

score 0 · Answer 1 · answered Sep 08 '17 at 18:26

0

Use the double ampersand comparison operators. If the first statement is true, the second will be executed.

Like so:

<span ng-show="e.Example ==='$' && doSomethingTo(e.Example)"></span>

function doSomethingTo(val) {
    val.property = 'foo';
    return true;
}

answered Sep 08 '17 at 18:26

Lansana Camara

9,497
11
47
87

@ Lansana: how would that work with html entity '&'. The browser renders it as & in the debugger – Robert Sep 08 '17 at 18:31
1

You can escape the & using a backslash \. – Lansana Camara Sep 08 '17 at 18:32
Sorry, english not first language, what you mean escape the & using a backslash – Robert Sep 08 '17 at 18:35
If you have 3 &'s and the browser is trying to parse the 3rd &, you need to escape the 3rd & which tells the browser to ignore it. For example, browser will see this as 3 &'s: `&&&`. Browser will see this as only 2 &'s: `&&\&`, because the 3rd is escaped. – Lansana Camara Sep 08 '17 at 18:36
sorry um... I posted on what I mean – Robert Sep 08 '17 at 18:42
Can you try `\&` instead of `&`? – Lansana Camara Sep 08 '17 at 18:45
If that doesn't work, instead of doing the check you are . doing just put all of the logic into a function and simply do `` which will both check the value as well as modify it and return true if all is well. At the javascript level, you won't have to worry about escaping the `&`; that should only matter at the HTML level since the browser will automatically try to encode that. – Lansana Camara Sep 08 '17 at 18:46
@ Lansana: Tried that approach. Nothing seems to work. I will keep looking. Thank you – Robert Sep 08 '17 at 19:02

score 0 · Answer 2 · answered Sep 08 '17 at 19:34

Check this snippet right here.

Take a look to see if you're doing something wrong when using ng-bind-html with $sce.trustAsHtml function.

(function() {

  angular
    .module('app', [])
    .controller('TestController', function($sce, $scope) {
      // Inject $sce service and call trust as html function
      $scope.test = $sce.trustAsHtml("Camp &amp; Stuff, Stuff $ Camp");
      
    });

})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <title>Test</title>
</head>
<body ng-app="app">

<div ng-controller="TestController as ctrl">
  
  <!-- Add ng-bind-html with the variable that contains the ampersand problem -->
  <span ng-bind-html="test"></span>

</div>

</body>
</html>

@ Bruno: I see what you are doing. However, how would I do that on a angular expression? Also, ampersand is displayed as & in the table, not as &. So when I display the results, instead of showing &, it displays & — Robert, Sep 09 '17 at 20:18

Use ng-show to replace a character in a string

2 Answers2