文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS/Javascript不绑定动态html附加

问CSS/Javascript不绑定动态html附加
EN

Stack Overflow用户

提问于 2017-02-12 07:05:26

回答 2查看 346关注 0票数 2

我正在尝试从角控制器动态绑定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);
        }           

    });
};

结果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>

目标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>

但是上面的代码没有绑定到目标元素。

如果是静态的html代码，相同的代码工作得很完美。

请在我做错的地方帮助我。

要更具体一点:由于html的动态绑定，DOM无法绑定数据-过滤器是否在动态html绑定之后刷新DOM对象？

javascript

jquery

html

css

angularjs

回答 2

Stack Overflow用户

发布于 2017-02-12 07:43:53

要循环到数组中，我建议使用ng-repeat指令，请查看ng-重复文档

AngularJS不是Jquery，请参阅这个问题以更好地理解angularJS的工作方式。

还：

你在用ng-app="SkillsApp"设置你的应用程序吗？

您是否用ng-controller="homeController"设置控制器？

你给getAllCategories()打电话了吗？例：ng-init="getAllCategories()"

示例

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>

票数 1

Stack Overflow用户

发布于 2017-02-12 07:35:45

试着把这个代码片段

$scope.categoriesList = [];

因为您应该将数据收集到$scope中的数组中。顺便说一句，如果你想要代码更干净，你可以使用服务或工厂。这里是链接

试着从角度上看服务和工厂的不同之处。干杯

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42185051

复制

相似问题

问CSS/Javascript不绑定动态html附加
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/Javascript不绑定动态html附加EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/Javascript不绑定动态html附加
EN