CODEWITHSUNDEEP
htmlangularjsarraysstring
Fai Zal Dong
Fai Zal Dong

Reputation: 247

AngularJS display specific String in HTML

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..

Upvotes: 0

Views: 141

Answers (3)

Sajeetharan
Sajeetharan

Reputation: 222682

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>

Upvotes: 1

rachmatsasongko
rachmatsasongko

Reputation: 186

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

Upvotes: 1

Shreevardhan
Shreevardhan

Reputation: 12641

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");
}

Upvotes: 0

Related Questions