beginnerprogrammer beginnerprogrammer - 1 year ago 18
AngularJS Question

insert new html code in the middle of ng-repeat

i want to insert new html code in the middle ng-repeat, but i don't know how.. i already try using append but it can't append.
Here's some example of my code

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">{{x}}

<div id="new_div"></div>
</h1>

<script>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]

$scope.$on('$viewContentLoaded', function() {
$scope.AppendText();
});

$scope.AppendText = function() {
var myEl = angular.element( document.querySelector( '#new_div' ) );
myEl.append('</div><div class="detail_area"><p class="detail_area_text"> Find out more about the products you want in a detailed search method.</p><div class="detail_area_button_div"><button class="detail_area_button_text"><span>Detail search filter <span style="color: #81abde;font-size: 50px;margin-left: 4px;"> > </span></span></button></div></div><div class="container container_page">');
}
});

</script>

</body>
</html>


Anyone know how to do it?

Answer Source

Track your repeat by index. show your record using {{x}}. Then check your condition in ng-if to show the new div. Yyou will have the iteration number in $index starting from 0.

<h1 ng-repeat="x in records track by $index">{{x}}

        <div ng-if="$index === 1" class="detail_area">
         <p class="detail_area_text"> Find out more about the products you want in a detailed search method.</p>
    <div class="detail_area_button_div">
    <button class="detail_area_button_text">
    <span>Detail search filter  </span>
    <span style="color: #81abde;font-size: 50px;margin-left: 4px;"> </span></button></div></div><div class="container container_page">
        <div id="new_div"></div>
  </div>
           </h1>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download