Dynamic table inside angularjs controller

Question

I am new to angularjs. I am working on angularjs controller. Inside a controller I have the below function

$scope.violation = function(argArray){
        var message = '';
        var violationLog = argArray;
        if(violationLog!= null && violationLog!='undefined')
        {
            var violationArray = new Array();
            violationArray = violationLog.split("<br/>");

           for (var i = 1; i < violationArray.length; i=i+2)
            {

                message += violationArray[i];

            }

        }
        return message;
     }

I am passing "argArray" variable to that function as

argArray = "4<br/>Time in this state exceeded 2 minutes.<br/>3<br/>Time in this state exceeded 1 minutes.";

Here, I want to arrange those two messages in 'tr' tags inside a table.

Like,

View Demo here

Help me.

Silas Hansen · Accepted Answer · 2015-04-10 07:20:20Z

2

I'm not a fan of your "array" being an HTML string, but if that is really the case, the best you can do, is to split it up to an actual array and feed that to your repeater:

HTML

<div ng-app="myApp" ng-controller="dynamicTable">

    <div ng-bind-html="violation(argArray)"></div>

</div>

Angular

var myApp = angular.module("myApp", []);

myApp.controller("dynamicTable", function($scope, $sce) {

    $scope.argArray = "4<br/>Time in this state exceeded 2 minutes.<br/>3<br/>Time in this state exceeded 1 minutes.";

    $scope.violation = function(argArray){

            var message = '';
            var html = "<table>";
            var violationLog = argArray;
            if(violationLog!= null && violationLog!='undefined')
            {

                var violationArray = new Array();
                violationArray = violationLog.split("<br/>");
               for (var i = 1; i < violationArray.length; i=i+2)
                {
                    message += "<tr><td>";
                    message += violationArray[i];
                    message += "</td></tr>";
                    html += message;
                }

            }
            html += "</table>";

            return $sce.trustAsHtml(html);
    }
});

Fiddle here: http://jsfiddle.net/5kjjsn3L/6/

UPDATE: This example was originally a table created with a repeater. The OP wanted the HTML created inside the controller, so it has been modified do just that.

edited Apr 10, 2015 at 7:20

answered Apr 9, 2015 at 8:22

Silas Hansen

1,7492 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nagarjuna Reddy Over a year ago

thanks for reply. Here also I am getting the same issue. Secong message is appending to the first message. So, I want to split the message using tr, td tags inside the function. Can you please tell me how to write table and tr, td tags inside the function.

Silas Hansen Over a year ago

Can you update the fiddle to show the issue? Then I'm sure we can find a solution.

Nagarjuna Reddy Over a year ago

I want something like : jsfiddle.net/5kjjsn3L/5

Silas Hansen Over a year ago

If thats what you want, I have fixed it for you here: jsfiddle.net/5kjjsn3L/6

Silas Hansen Over a year ago

Good. I have updated the answer with the solution we came up with. Please mark it as an answer, if it meets your requirements.

huan feng · Accepted Answer · 2015-04-09 08:17:51Z

0

Is this you wanted?

<table>
      <tr ng-repeat="msg in model.messages">
          <td>{{ msg }}</td>
      </tr>

  </table>

detail pnlkr

answered Apr 9, 2015 at 8:17

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Comments

Weedoze · Accepted Answer · 2015-04-09 08:23:46Z

0

In your html you create the table like this

<table>
     <tr ng-repeat="msg in messages">
          <td>{{msg}}</td>
     </tr>
</table>

Then in your controller, you push your message in $scope.messages

$scope.violation = function(argArray){
    var violationLog = argArray;
    if(violationLog!= null && violationLog!='undefined')
    {
        var violationArray = new Array();
        violationArray = violationLog.split("<br/>");

       for (var i = 1; i < violationArray.length; i=i+2)
        {
            $scope.messages.push(violationArray[i]); 
        }

    }
 }

answered Apr 9, 2015 at 8:23

Weedoze

14k2 gold badges38 silver badges65 bronze badges

1 Comment

Nagarjuna Reddy Over a year ago

Thanks for reply. I want table, tr, td tags inside the function dynamically. Fiddle : jsfiddle.net/5kjjsn3L/5

Collectives™ on Stack Overflow

Dynamic table inside angularjs controller

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related