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 docs.angularjs.org/api/ng/directive/ngRepeat — Merlin
– Merlin, Commented Feb 12, 2017 at 7: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
– Vigneshwaran Markandan, Commented Feb 12, 2017 at 10:03

Community · Accepted Answer · 2017-05-23 11:53:14Z

1

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>

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Feb 12, 2017 at 7:43

Merlin

4,9252 gold badges35 silver badges53 bronze badges

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

2 Comments

Vigneshwaran Markandan Over a year ago

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.

Merlin Over a year ago

what data-filter is supposed to do ? There is no data-filter build in directive in angularjs

Adoel · Accepted Answer · 2017-02-12 07:35:45Z

0

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

answered Feb 12, 2017 at 7:35

Adoel

11 bronze badge

Collectives™ on Stack Overflow

CSS/Javascript not binding on dynamic html append

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related