AJS customize the html to show only certain parts in ng-include

Question

I am able to include a html file into my angular application (ng-include), but i don't want all the content in the html to be shown in my application (it is not an angular application and its conent cant be changed. so ng-show and ng-hide didnt work)

Below is the sample code

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <div ng-include="'myTable.htm'"></div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

});
</script>

myTable.htm

<html>
  <head>this is head</head>
  <body>
<div> test
<h1 id="needToDispalythis">ds,<span>something</span></h1>
</div></body>
</html>

here i want only the conent with id needToDispalythis needs to be displayed. I tried with directive, but not able to achiheve it. Any help or pointers

atefth · Answer 1 · 2019-02-26T10:03:09.280

Update

You can simply use jQuery to hide the other elements except the element with ID needToDisplayThis like this:

$(document).ready(function(){
  var elemToShow = $('#needToDisplayThis');
  $('body').html('<div><h1>'+elemToShow.html()+'</h1></div>');
});

Firstly, your ng-include myTable.html should not contain the <html><head></head><body></body></html> tags. Use only the markup that you want to render, ie: <div> test<h1 id="needToDispalythis">ds,<span>something</span></h1></div>.

So your main html should look like this:

<html>
  <head>this is head</head>
  <body>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
      <div ng-include="'myTable.htm'"></div>
    </div>

    <script>
      var app = angular.module('myApp', []);
      app.controller('customersCtrl', function($scope, $http) {

      });
    </script>
  </body>
</html>

And your included html should look like this:

<div> 
  <span>test</span>
  <h1 id="needToDispalythis">ds,<span>something</span></h1>
</div>

Now to only show the <h1> element you need to hide the <span> element, so add an ng-hide attribute to that:

<span ng-hide="hideThis">test<span/>

Now simply set the hideThis variable on the $scope to true:

<script>
   var app = angular.module('myApp', []);
   app.controller('customersCtrl', function($scope, $http) {
     $scope.hideThis = true;
   });
</script>

So finally, your main html looks like this:

<html>
  <head>this is head</head>
  <body>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
      <div ng-include="'myTable.htm'"></div>
    </div>

    <script>
      var app = angular.module('myApp', []);
      app.controller('customersCtrl', function($scope, $http) {
        $scope.hideThis = true;
      });
    </script>
  </body>
</html>

and your myTable.html looks like this:

<div> 
  <span ng-hide="hideThis">test<span/>
  <h1>ds,<span>something</span></h1>
</div>

Regarding "your ng-include myTable.html should not contain the " this html is external and will be got dynamically, so i cant directly editt the html. I want it to be edited through js — Cedric, Feb 26 '19 at 08:49
@Cedric, are you able to use jQuery, then please look at the update. — atefth, Feb 26 '19 at 10:03

AJS customize the html to show only certain parts in ng-include

1 Answers1