I wrote this angularjs code and html code in side cshtml file window using Visual studio 2013 to study the behavior of element.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>"));
lixvar.wrap(listElemx);
}
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>
I used Visual studio 2013 to write this code. Here is a screen shot of the result...
Screenshot
As you can see the <li></li> are not created while using wrap().
Actually in the working code <li></li> elements are created. Here is a screen shot of the web page created by a working code(using append() except wrap()).
Screenshot
I want to know is there any better way to write this angularjs code and html code (using wrap() in side angular js code) to create <li></li> elements on the web page it self when the whole code is executed in the IDE.
Submit an article or tip