Angularjs - Attempted to trust a non-string value in a content requiring a string: Context: html - while inserting data

Question

I'm trying to insert HTML content dynamically based on the ITEMS available in DB and need to save back to DB again on click of each item's save button which was added dynamically as below.

Controller.js:

 function getItemCommentItems() {
        $http({
            method: 'GET',
            url: 'http://xxx/api/ItemComments/GetItemCommentItems',           
            params: { Area_Id: 'L4' },           
            headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' }
        }).then(function successCallback(response) {
            //  $scope.itemDtls = [];
            $scope.itemDtls = response.data;
             displayItems($scope.itemDtls);   
        }, function errorCallback(response) { });
    }
 function displayItems(itemData)
    {
        // alert(itemData.length);  Length: 2
        for (i = 0; i <= itemData.length; i++) {
            Title = '<table><tr><td><label for="ITEM_NAME">Item:  </label>{{' & itemData[i].ITEM_NAME & '}}</td></tr ><tr><td><input type="text" id="inpPriority" value="{{ ' & itemData[i].PRIORITY & ' }}" /></td></tr> <tr> <td><input type="text" id="inpComment" value="{{ ' & itemData[i].COMMENT & '}}" /></td></tr><tr> <td><input type="button" ng-click="onSave()" value="Save {{ ' & itemData[i].ITEM_ID & '}}" /></td></tr ></table >';
           // Title = $sce.trustAsHtml(itemData[i]);  ----> Error here Attempted to trust a non-string value in a content requiring a string: Context: html
            $scope.divHtmlVar = $sce.trustAsHtml(Title);  ----> Error here Attempted to trust a non-string value in a content requiring a string: Context: html.   
        }
    }

.HTML:

<tr> <td> <div ng-bind-html="divHtml"></div> </td> </tr>

Class details:

 public string ITEM_ID { get; set; }
        public string ITEM_NAME { get; set; }
    public string COMMENT { get; set; }
        public string PRIORITY { get; set; }
        public string ITEM_ID { get; set; } 

Error msg: Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html

Can some body help me here in fixing this issue or is there a better way to do this whole way of insert and save dynamically?

Answer 1

Why are you using the ng-bind-html in the first place? It would be much better if you had your elements described in a template. Then you don't need to use $sce at all. Something like that I suppose:

<table ng-repeat="item in itemDtls">
  <tr>
    <td>
      <label for="ITEM_NAME">Item: </label>{{item.ITEM_NAME}}
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="inpPriority" value="{{item.PRIORITY}}" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="inpComment" value="{{item.COMMENT}}" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" ng-click="onSave()" value="Save {{item.ITEM_ID}}" />
    </td>
  </tr>
</table>