I am trying to bind html dynamically from angular controller
我试图从角度控制器动态绑定html
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:
结果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:
目标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.
如果它是静态html代码,相同的代码将完美地工作。
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?
更具体一点:由于html的动态绑定,DOM无法绑定数据过滤器无论如何在动态html绑定后刷新DOM对象?
2 个解决方案
#1
1
To loop into arrays I recommend to use ng-repeat
directive have a look at ng-repeat documentation
要循环到数组,我建议使用ng-repeat指令查看ng-repeat文档
AngularJS is not Jquery see this question to a better understanding on how angularJS works
AngularJS不是Jquery看到这个问题,以更好地理解angularJS如何工作
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()"
另外:你是用ng-app =“SkillsApp”设置你的应用程序你是用ng-controller =“homeController”设置你的控制器你在某处调用getAllCategories()吗?例如: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>
#2
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
因为您应该将数据收集到$ scope内的数组中。顺便说一句,如果你想编码清洁,你可以使用服务或工厂。这是LINK
Try to see the diferent of service and factory in angular. Cheers
尝试在角度上看到不同的服务和工厂。干杯
#1
1
To loop into arrays I recommend to use ng-repeat
directive have a look at ng-repeat documentation
要循环到数组,我建议使用ng-repeat指令查看ng-repeat文档
AngularJS is not Jquery see this question to a better understanding on how angularJS works
AngularJS不是Jquery看到这个问题,以更好地理解angularJS如何工作
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()"
另外:你是用ng-app =“SkillsApp”设置你的应用程序你是用ng-controller =“homeController”设置你的控制器你在某处调用getAllCategories()吗?例如: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>
#2
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
因为您应该将数据收集到$ scope内的数组中。顺便说一句,如果你想编码清洁,你可以使用服务或工厂。这是LINK
Try to see the diferent of service and factory in angular. Cheers
尝试在角度上看到不同的服务和工厂。干杯