locked
What is the wrong with this code? RRS feed

  • 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...

    Monday, May 4, 2015 7:32 AM

Answers

  • User1644755831 posted

    Hello,

    var lixvar = angular.element("<span>").css('color', 'red').css('font-weight', 'bold').text(myarray[j]).wrap(angular.element("<li>"));

    You are wrapping the li element but I don't see the closing tag of the li element. this could be the issue.

    Below is a wrap example.

    <div class="container">
    
      <div class="inner">Hello</div>
    
      <div class="inner">Goodbye</div>
    
    </div>
    
    

    Using .wrap(), we can insert an HTML structure around the inner <div> elements like so:

    $( ".inner" ).wrap( "<div class='new'></div>" );

    Result

    <div class="container">
    
      <div class="new">
    
        <div class="inner">Hello</div>
    
      </div>
    
      <div class="new">
    
        <div class="inner">Goodbye</div>
    
      </div>
    
    </div>
    
    

    See http://api.jquery.com/wrap/

    Hope this helps.

    With Regards,

    Krunal Parekh

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 17, 2015 10:38 PM