How to Add a Space After Ng-Repeat Element

How to add whitespace after each element created by ng-repeat

@Fissio solution almost work, I just need to add this css:

br {
  display: none;
}

and it work. Plunker

How to add space betweeen ng-repeat block element?

You need to make your <span> as a block level element so that there is a new line preceding and succeeding the <span>. Change your CSS to

.messageMargin {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

or, if messageMargin is used somewhere else where you do not want to make it a block level element then add the css as inline:

<span  class="messageMargin" style="display:block;">{{message.value}}</span>

Angularjs ng-repeat creating inconsistent spacing between list elements

Version 1 and 2 are both correct. As you said, the spacing results from the formatting in your html combined with "display: inline-block". If you put all three li-items on one line, you won't have the spacing anymore.

Version 3 is not correct, because instead of creating a list with 3 elements, it creates 3 lists with 1 element each.

To achieve consistent results between version 1 and 2, you could use the following css:

.test-grid {
}

.test-grid ul {
    list-style: none;
    clear: both;
}

.test-grid li {
    display: block;
    float: left;
    position: relative;
    background: red;    
}

Hope that helps!

ng-repeat and button spacing in Chrome & Edge & Firefox

This problem pretty much has nothing to do with how ng-repeat works. The button element has display inline block by default (MDN)

To fight the space between the buttons, simply give them a margin left of negative 5px

This CSS-tricks topic is worth a read, and heres a demo of your problem and the fix for it

#fix button{  display: inline;  margin-right: -5px;}

<div id="problem">  <button>clear</button>  <button>clear</button>  <button>clear</button></div>
<div id="fix">  <button>clear</button>  <button>clear</button>  <button>clear</button></div>

How to use variables with space in AngularJS ng-repeat?

You need to access that using square brackets like:

<td>{{stat['Organic Inbound']}}</td>

This is because Organic Inbound is the key of the object stat and it is separated by space. Using square brackets will evaluate the whole string value Organic Inbound as a key of stat.

Add a div element dynamically in ng-repeat angularjs

Each time you want to add a list add it to a list containing lists, $scope.listOfLists = [];. You could then use NgRepeat with the listOfLists and dynamically add more list to the view.

Here's an example:

angular.module("app",[]).controller("myCtrl",function($scope){  $scope.listOfLists = [];  $scope.workboardstages = [    {        stageName:"stageName1"    },    {        stageName:"stageName2"    },    {        stageName:"stageName3"    }  ];  $scope.workboardStagesWithDefault = [    {        Name:"New"    },    {        Name:"Won"    },    {        Name:"Lost"    }    ];         $scope.addNew = function(){           var clonedList = angular.copy($scope.workboardStagesWithDefault);           $scope.listOfLists.push(clonedList);     };     $scope.removeMe = function(index){        $scope.listOfLists.splice(index,1);     };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<div class="col-xs-12 col-sm-4 col-md-4" data-ng-    if="workboardstages.length">    <ul class="simpleDemo row">    <li data-ng-repeat="workboard in workboardstages">    {{workboard.stageName}}     </li>    </ul>    </div>        <div class="col-xs-12 col-sm-4 col-md-4" data-ng-show="listOfLists.length > 0">    <div data-ng-repeat="list in listOfLists">    <ul class="simpleDemo row">    <li data-ng-repeat="workboard in list">    {{workboard.Name}}     </li>    </ul>    <button ng-click="removeMe($index)">remove {{$index}}</button>    </div>        </div>        <div class="col-xs-12 col-sm-4 col-md-4">    <button data-ng-click="addNew()">Add New Workboard</button>    </div>
</div>

---

Related Topics