CSS/Javascript not binding on dynamic html append

Question

I am trying to bind html dynamically from angular controller

SkillsApp.controller('homeController', function ($scope, $http, $q, $timeout) {
$scope.getAllCategories = function () {
    $http({
        url: "/Categories/GetAllCategories",
        method: 'GET',
    }).success(function (response) {
        $scope.categoriesList = response;
        for (var i = 0; i < $scope.categoriesList.length; i++)
        {
            var categoryyy = '<li><a href="#" data-filter=".commercial">' + $scope.categoriesList[i].Name + '</a></li>';                
            $('#Category').append(categoryyy);
        }           

    });
};

Result Html:

<ol class="type" id="Category">                                
   <li><a href="#" data-filter=".commercial">Commercial</a></li>
  <li><a href="#" data-filter=".residential">Residential</a></li>
  <li><a href="#" data-filter=".commercial">Commercial</a></li>
  </ol>

Target Html:

 <div class="col-sm-6 col-md-4 col-lg-4 RESIDENTIAL">
  <div class="portfolio-item">
   <div class="hover-bg">
    <a href="img/portfolio/01-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
     <div class="hover-text">
       <h4>Project Name</h4>
     </div>
     <img src="~/img/portfolio/01-small.jpg" class="img-responsive" alt="Project Title">
   </a>
  </div>
  </div>
  </div>

But the above code was not binding to the target element.

The same code works perfectly if it is static html code.

Kindly help me where i am doing wrong.

To be more specific : Due to dynamic binding of html the DOM was not able to bind data-filter Is there anyway to refresh DOM objects after the dynamic html binding?

This is not the right angular way to achieve want you want. Have à look à `ng-repeat` https://docs.angularjs.org/api/ng/directive/ngRepeat — Merlin, Feb 12 '17 at 07:38
I guess here nothing to do with angular, i will get same result, Again it will fail on binding. Instead of data-filter, href will work. — Vigneshwaran Markandan, Feb 12 '17 at 10:03

score 1 · Answer 1 · edited May 23 '17 at 11:53

To loop into arrays I recommend to use ng-repeat directive have a look at ng-repeat documentation

AngularJS is not Jquery see this question to a better understanding on how angularJS works

Also:
Are you setting your app with ng-app="SkillsApp"
Are you setting your controller with ng-controller="homeController"
Do you call getAllCategories() somewhere ? eg: ng-init="getAllCategories()"

Example

SkillsApp.controller('homeController', function ($scope, $http, $q, $timeout) {
$scope.getAllCategories = function () {
    $http({
        url: "/Categories/GetAllCategories",
        method: 'GET',
    }).success(function (response) {
        $scope.categoriesList = response;
    });
};


<body ng-app="SkillsApp" ng-controller="homeController" ng-init="getAllCategories()" >
    <ol class="type"> 
        <li ng-repeat="categorie in categoriesList">
            <a href="#">{{categorie.name}}</a>
        </li>
    </ol>
</body>

I guess here nothing to do with angular, i will get same result, Again it will fail on binding. Instead of data-filter, href will work. — Vigneshwaran Markandan, Feb 12 '17 at 10:03
what `data-filter` is supposed to do ? There is no `data-filter` build in directive in `angularjs` — Merlin, Feb 13 '17 at 08:15

score 0 · Answer 2 · answered Feb 12 '17 at 07:35

Try to put a snippet this code

$scope.categoriesList = [];

Because you should collect data in to array inside $scope. Btw, if you want to code cleaner, you can use service or factory. Here it is the LINK

Try to see the diferent of service and factory in angular. Cheers

CSS/Javascript not binding on dynamic html append

2 Answers2