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.

Answer 1

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.

Answer 2

Is this you wanted?

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

  </table>

detail pnlkr

Answer 3

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]); 
        }

    }
 }