AngularJS display specific String in HTML

Question

I'm still in process learning Angular.

For my current project I need to display HTML (eg: <h1>note1</h1><span>my first note</span><br><h1>note2</h1><span>my second note</span>) in my view. I know everyone will suggest to use ng-bind-html, but that is not what I want.

What I want is, i want to do checking if string HTML have note2 then display my second note.

In controller I know how to find string note2 which is use .match.

JSON

items =
[
    {
        "description": "<h1>note1</h1><span>my first note</span><br><h1>note2</h1><span>my second note</span>"
    }
]

In controller find String note2

angular.forEach(items, function(value, key) {
    if (value.description.match("note2")) {
        console.log(value.description);
        // will output HTML <h1>note1</h1><span>my...
    }
    else {
        console.log("string not found");
    }
});

I can do till find String note2, but to display my second note I don't have any idea.

Can someone help me with this, thanks..

Can you change items.description to value.description?

Ramesh Rajendran
– Ramesh Rajendran

2017-01-11 05:17:54 +00:00
Commented Jan 11, 2017 at 5:17 — Ramesh Rajendran
– Ramesh Rajendran, Commented Jan 11, 2017 at 5:17
@RameshRajendran yeah already change it

Fai Zal Dong
– Fai Zal Dong

2017-01-11 07:50:16 +00:00
Commented Jan 11, 2017 at 7:50 — Fai Zal Dong
– Fai Zal Dong, Commented Jan 11, 2017 at 7:50

rachmatsasongko · Accepted Answer · 2017-01-11 08:53:08Z

1

I haven't test this, but maybe you can use split function

angular.forEach(items, function(value, key){

    if(items.description.match("note2")){
        console.log(items.description);
        var noteValues = items.description.split("<h1>note2</h1>");
        $scope.mySecondNote = noteValues[1]; // value is <span>my second note</span>
    }else{
        console.log("string not found");
    }
});

EDIT

Plunker DEMO here

edited Jan 11, 2017 at 8:53

answered Jan 11, 2017 at 5:09

rachmatsasongko

1861 silver badge7 bronze badges

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

2 Comments

rachmatsasongko Over a year ago

@RameshRajendran OP wants to get ONLY the my second note text. This code get exactly like what OP wants. See DEMO here link

Fai Zal Dong Over a year ago

@rachmatsasongko thanks mate! your answer is clean (y)

Juan · Accepted Answer · 2017-01-11 14:25:09Z

1

It should be value.description., because items is an array

 angular.forEach(items, function(value, key) {
      if (value.description.match("note2")) {
}

DEMO

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope",
  function($scope) {
    items = [{
      "description": "<h1>note1</h1><span>my first note</span><br><h1>note2</h1><span>my second note</span>"
    }];
    angular.forEach(items, function(value, key) {
      if (value.description.match("note2")) {
        console.log(value.description);
        // will output HTML <h1>note1</h1><span>my...
      } else {
        console.log("string not found");
      }
    });
  }
]);

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="MainViewController.js"></script>
</head>


<body ng-controller="dobController">
</body>

</html>

edited Jan 11, 2017 at 14:25

Juan

5,0883 gold badges41 silver badges49 bronze badges

answered Jan 11, 2017 at 5:05

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

3 Comments

Fai Zal Dong Over a year ago

@Sajeetharan. I dont want to output all HTML. I want to get text my second note. What do you do is displaying all HTML text

Fai Zal Dong Over a year ago

Plus, If you noticed from my point, I want to display my second note if checking in controller found note2. Have any idea to get this my second note text ?

Fai Zal Dong Over a year ago

Those people up vote for this answer is not understanding my question

Shreevardhan · Accepted Answer · 2017-01-11 05:20:23Z

0

Change to

if (items[0].description.match("note2")) {
    console.log(items[0].description);
    // will output HTML <h1>note1</h1><span>my...
}
else {
    console.log("string not found");
}

edited Jan 11, 2017 at 5:20

answered Jan 11, 2017 at 5:11

Shreevardhan

12.7k3 gold badges39 silver badges53 bronze badges

2 Comments

Ramesh Rajendran Over a year ago

ask to OP for, Why OP using loop?

Fai Zal Dong Over a year ago

cuz my real data was loop. That is why I'm giving example JASON in loop

Collectives™ on Stack Overflow

AngularJS display specific String in HTML

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related