Styjun

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?

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>