What is the wrong with this code?
Question
-
User-35580265 posted
I wrote this code to study the behavior of wrap(elements). But it is not working as I hoped...
@{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="exampleapp">
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<title>Directives</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script>
angular.module("exampleapp", []).directive("demoDirective", function ()
{
return function (scope, element, attrs)
{
var listElem = angular.element("<ol>");
element.append(listElem);
for(var i=0;i<scope.names.length;i++)
{
listElem.append(angular.element("<li>").append(angular.element("<span>").text(scope.names[i])));
}
var listElemClone = listElem.clone();
element.append(listElemClone);
var myarray = angular.copy(scope.names);
myarray.reverse();
var listElemx = angular.element("<ol>");
element.prepend(listElemx);
for (var j = 0; j < myarray.length; j++) {
var lixvar = angular.element("<span>").css('color', 'red').css('font-weight', 'bold').text(myarray[j]).wrap(angular.element("<li>"));
listElemx.append(lixvar);
}
var searchresults = listElemx.find('li');
for (var i = 0; i < searchresults.length; i++)
{
if(searchresults.eq(i).children().eq(0).text()=='Apple')
{
searchresults.eq(i).replaceWith(angular.element("<span>").css('color', 'green').css('font-weight', 'bold').text('Waruna')).wrap(angular.element('<li>'));
}
}
};
}).controller("defaultctrl", function ($scope) {
$scope.names = ["Apple","Bananas","Oranges"];
});
</script>
</head>
<body ng-controller="defaultctrl">
<h3>Fruit</h3>
<div demo-directive></div>
</body>
</html>Here is a screen shot of the result...
