How to pass value from HTML to Client controller in a SP Widget

[mballinger]

Hello,

I have a service portal widget that displays a table of records. I am trying to print out the row count at the top of my page, but I am unsure of how to pass html value to the client controller. how can I do that?

This is what I have to display the record count:

<tr ng-repeat="comp in results = ( c.data.list | orderBy:sortType:sortReverse | filter:comp_search:strict)">   
    <span id="record-count" style="float:right;">Records Found: {{results.length}}</span>

I need to get the value from results.length and pass it to the client controller. Then I need to be able to call it back in the HTML.

Thanks!

[Periyasamy P]

You can access data object(generated in server script) directly in your client script. If you have create any input element then you can access as below,

<input ng-model="c.fname" type="text" />
<button ng-click="c.showAlert()">Click</button>

In client script,

c.showAlert = function(){
alert(c.fname);
};

[Sebastian L]

Hm, I think this is a little bit tricky, since it is a value you get from a filtered list. Normally you will bind data from html to client with a ng-model. 

Why is it you need it in the Client Controller and when do you need? Is it after a click of a button or something else? If the latter, then maybe something like this - again, depending on your actual use case - just an example on how to pass data from html to client: 

//HTML   
 <input type="text" ng-model="fname" name="fname" ng-init="fname=results.length" ng-hide="true">
  <button ng-click="doStuffToThis()">Click me</button>

//Client controller

	$scope.doStuffToThis = function(){
		console.log('hello2 '+$scope.fname);
	}

[mballinger]

@Sebastian Laursen - Thanks for your response. No this is not for a button, this is just to display the total record count when the list is filtered. The area where I want to put the record count is outside of this particular table. I wanted to move it outside of the <div> 

***EDIT***

The way I currently have it without the client controller works just fine to display the total output, but I wanted to move it outside of the table

[Sebastian L]

Ah, should be more simple then, so use the same approach with ng-model and ng-init to store the value. Then outside of the div refer to the ng-model as below {{fname}} 

<div>
<tr ng-repeat="comp in results">
<span>Records Found: {{results.length}}</span>
<input type="text" ng-model="fname" name="fname" ng-init="fname=results.length" ng-hide="true">
</tr>
</div>

<!-- Here outside of div you can call the ng-model and display the data by refering to the above ng-model -->
<div type="text">{{fname}}</div>