当前位置: 首页 > 面试题库 >

AngularJS在ng-repeat元素中附加HTML

郦何平
2023-03-14
问题内容

使用AngularJS,我需要使用选择器将HTML附加到ng-repeat元素:’objectMapParent-‘+ post._id

  <div ng-repeat="post in posts">

    <div id="{{ 'objectMapParent-' + post._id }}">
      <h5 style="color:blue; margin-top: 3px;">{{post.title}}</h5>

    </div>
  </div>

所以我创建了一个循环以遍历posts数组的元素的循环,对于每个元素,我在其中调用函数:createElement

 $scope.posts = [{
    _id: "1",
    title: "map of london"
  }, {
    _id: "2",
    title: "map of brazil"
  }, {
    _id: "3",
    title: "map of usa"
  }];

  $scope.posts.forEach(function(post) {
    // console.log(post);

    createElement("#objectMapParent-" + post._id, function() {
      //create map here after append 
    });
  });

该回调函数获得一个选择器elementParent,该选择器用于在DOM中查找节点,然后附加所需的HTML

  var createElement = function(elementParent, cb) {

    var aux = elementParent;

    var postId = aux.replace("#objectMapParent-", "");

    var myElement = angular.element(document.querySelector(elementParent));

    var html = "<div id='objectMap-" + postId + "'><div id='BasemapToggle-" + postId + "'></div></div>";
    myElement.append(html);

    cb();
  };

但是有些事情行不通,就我而言,document.querySelector函数找不到选择器。

在我看来,当它尝试选择时,该节点尚不存在于DOM中。

我在codepen中复制了代码,可能会有所帮助。


问题答案:

如何在自定义指令中封装jQuery代码

任何处理DOM的jQuery代码都应封装在一个自定义指令中,以便在AngularJS框架ng-
repeat指令
实例化该元素时执行

<div ng-repeat="post in posts">
    <div id="{{ 'objectMapParent-' + post._id }}">
         <h5 style="color:blue; margin-top: 3px;">{{post.title}}</h5>
         <my-element post="post"></my-element>
    </div>
</div>



app.directive("myElement", function() {
    return {
        link: postLink,
    };
    function postLink(scope,elem,attrs) {
        var post = scope.$eval(attrs.post);
        var html = `
          <div id="objectMap-${post._id}">
            <div id="BasemapToggle-${post._id}">
            </div>
          </div>
        `;
        elem.append(html);
    }
})

要使用jQuery,只需确保在angular.js文件之前加载了它。

有关更多信息,请参见

  • AngularJS开发人员指南-创建自定义指令
  • AngularJS angular.element API参考


 类似资料:
  • 问题内容: 我目前正在使用这段代码来呈现列表: 但是,该元素在某些浏览器上引起一些非常小的渲染缺陷。我想知道是否可以在没有div容器的情况下执行ng- repeat,或者通过其他方法来达到相同的效果。 问题答案: 正如Andy Joslin所说,他们正在研究基于注释的ng- repeats,但显然存在太多浏览器问题。幸运的是,AngularJS 1.2添加了对重复的内置支持,而无需使用新的指令和添

  • 问题内容: 我有一本字典存放在 现在,我不想包含重复的,我应该使用什么? 问题答案: 只需创建一个可以通过键获取唯一值的过滤器即可。这样的事情应该做(我根本没有测试过,所以我把这件事留给你,这只是给你一个主意): 注意:Array.indexOf()在IE8中不起作用 ,因此,如果支持IE8,则需要在indexOf()中存根,或者需要使用稍微不同的方法。 其他想法:如果已经在引用那些库,那么最好创

  • 问题内容: 以下脚本使用来显示购物车。对于数组中的每个元素,它都会显示项目名称,其数量和小计()。 计算重复元素总价的最简单方法是什么? 问题答案: 在模板中 在控制器中

  • 问题内容: 是否可以根据条件向标签添加内容?像在此示例中一样,当我只想在第一次迭代中添加时(仅用于的第一个元素)? 问题答案: 是的,在这种情况下,AngularJS具有两个指令: 可以使用ng-show / ng-hide指令族基于评估表达式的结果来隐藏(通过使用显示CSS规则)DOM 3的一部分。 如果我们想有条件地物理删除/添加DOM的一部分,那么ng-switch指令家族(ng-switc

  • 问题内容: 我正在尝试自定义一个,以便为每个第4个元素添加类似标签的内容。我曾尝试搜索,但似乎找不到可靠的答案。有没有简单的方法可以为Angular这样的条件添加条件?我只是在其中添加了一些内容,但我需要在第4个元素处开始新的一行。 即我想要以下 但现在它只是这样做 如果有关于自定义的好文章(对于新手),我将非常感谢您提供的链接以及到目前为止我发现的所有内容都太难理解了。 的HTML 问题答案:

  • 问题内容: 作为AngularJS的新手,我正在寻找一种在触发后定位循环内元素的方法。他们当时似乎还没有准备好。谢谢你的帮助。 问题答案: 这篇博客文章讨论了在控制器中侦听事件以调用函数,而不是使用: