javascript - <br> tag in ng-repeat angular-js - Stack Overflow

admin管理员组

文章数量:1391987

I have an ng-repeat <ul> list. I want to insert <br> after each <ul> tag. How can i do this?.

Here is my code

<ul class="list" ng-repeat="result in results">
    <li class="list__header">{{$index+1}}</li>
    <li class="list__item">{{result.name}}</li>
    <li class="list__item">{{result.address}}</li>
    <li class="list__item">{{result.phone_number}}</li>
</ul><br><br>

The above <br> is not renderd

I have an ng-repeat <ul> list. I want to insert <br> after each <ul> tag. How can i do this?.

Here is my code

<ul class="list" ng-repeat="result in results">
    <li class="list__header">{{$index+1}}</li>
    <li class="list__item">{{result.name}}</li>
    <li class="list__item">{{result.address}}</li>
    <li class="list__item">{{result.phone_number}}</li>
</ul><br><br>

The above <br> is not renderd

• javascript
• html
• angularjs

Share Improve this question Follow edited Nov 14, 2015 at 15:22 enkrates 62611 gold badge66 silver badges1717 bronze badges asked Nov 14, 2015 at 14:22 Blessan KurienBlessan Kurien 1,67599 gold badges3333 silver badges6464 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Use ng-repeat-start and ng-repeat-end:

    <ul class="list" ng-repeat-start="result in results">
                   <li class="list__header">{{$index+1}}</li>
                   <li class="list__item">{{result.name}}</li>
                   <li class="list__item">{{result.address}}</li>
                    <li class="list__item">{{result.phone_number}}</li>
    </ul><br><br ng-repeat-end />

Documentation: https://docs.angularjs/api/ng/directive/ngRepeat#special-repeat-start-and-end-points

You can also use a custom directive for this purpose:

 .directive("insertAfter", function(){
    return {
        scope: {
            content: "@"
        }, 
        link: function(scope, element, attrs){
            element.after(scope.content);
        }
    }
  });

Then use it inside of your list:

<ul class="list" ng-repeat="result in photos" insert-after content="<br>">...</ul>

本文标签： javascriptltbrgt tag in ngrepeat angularjsStack Overflow