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!

[mballinger]

I tried the following and no results are displaying:

<div>{{fname}}</div>

<table>
       <tr ng-repeat="comp in results = ( c.data.list | orderBy:sortType:sortReverse | filter:comp_search:strict)">
         <span id="record-count" style="float: right; font-weight:bold;">Records Found: {{results.length}}</span>
         <input type="text" ng-model="fname" name="fname" ng-init="fname=results.length">
       </tr>
</table>

[Sebastian L]

It should actually work to just put {{results.length}} outside of your div as well. Try to replace ng-init with ng-value instead. I don't have your filters, so just put in an example. It is working in my dev: 

<!-- This should work -->
<div>Records Found: {{results.length}}</div>
<div>
  <table>
<tr ng-repeat="comp in results = (data.list | orderBy : 'name')">   
    <span>Records Found: {{results.length}}</span>
  </tr>  
    </table>
</div>


<!-- If for some reason it is not working, we can utilize ng-value as below..-->
<div type="text">1 {{fname}}</div>
<div>
  <table>
<tr ng-repeat="comp in results = (data.list | orderBy : 'name')">   
    <span>Records Found: {{results.length}}</span>
    <input type="text" ng-model="fname" name="fname" ng-value="fname=results.length" ng-hide="true">
  </tr>  
    </table>
</div>

[mballinger]

@Sebastian Laursen - I tried it out and it did not work the way I needed it to. If I reference ng-value or ng-init within the <div> the table is being created, ng-value and ng-init work just fine. When I try to reference the <div> before, no value appears. 

Here is the full html of what I have that did not work with ng-value outside of the <div>. Line 30 is where I attempt to call "fname":

<div ng-if="!data.error" class="panel panel-{{::options.color}} b vdp">
  <div class="panel-heading vdp wide">
    <table width="100%">
      <tr>
        <td>
          <h3 style="color:#428bca;padding-left:1rem;"><fa ng-if="::options.glyph.length" name="{{::options.glyph}}" class="m-r-sm" />
            ${My Issues}
          </h3>
        </td>
        <td></td>
        <td>
          <div style="font-size:20px;float:right;">&nbsp;
      			<a href="" target="_blank">
              <span class="fa fa-plus"/>&nbsp&nbsp Create New
      			</a>
    			</div>
        </td>
      </tr>
      <tr>
       <td>&nbsp</td>
      </tr>
      <tr>
        <td>
			<button class="pi-filter-pending button-width" ng-click="comp_search = {state: 'Pending'}">Pending</button>
			<button class="pi-filter-review button-width" ng-click="comp_search = {state: 'Review'}">Review</button>
			<button class="pi-filter-complete button-width" ng-click="comp_search = {state: 'Closed Complete'}">Closed Complete</button>
        </td>
        <td>
        	<h5>
				Records Found: {{fname}}
          </h5>
        </td>
        
      </tr>
    </table>
  </div>
  <div ng-if="c.data.list" class="panel-body vdp table-responsive">
    <div class="tab-content">

      <div id="active" class="tab-pane fade in active">
        <table id="PO" class="table table-hover table-striped" role="grid">
          <thead>
            
            <!-- Header Fields -->
            <tr>
				<th>
              	<a href="javascript:void(0)" ng-click="sortType = 'date'; sortReverse = !sortReverse">${Date}
                  <span ng-show="sortType == 'date' && !sortReverse" class="fa fa-caret-down"></span>
                  <span ng-show="sortType == 'date' && sortReverse" class="fa fa-caret-up"></span>
                </a>
              </th>
				<th>
              	<a href="javascript:void(0)" ng-click="sortType = 'number'; sortReverse = !sortReverse">${Number}
                  <span ng-show="sortType == 'number' && !sortReverse" class="fa fa-caret-down"></span>
                  <span ng-show="sortType == 'number' && sortReverse" class="fa fa-caret-up"></span>
                </a>
              </th>
              <th>
                <a href="javascript:void(0)" ng-click="sortType = 'description'; sortReverse = !sortReverse">${Description}
                  <span ng-show="sortType == 'description' && !sortReverse" class="fa fa-caret-down"></span>
                  <span ng-show="sortType == 'description' && sortReverse" class="fa fa-caret-up"></span>
                </a>
              </th>
              <th class="centerText">
                <a href="javascript:void(0)" ng-click="sortType = 'state'; sortReverse = !sortReverse">${State}
                  <span ng-show="sortType == 'state' && !sortReverse" class="fa fa-caret-down"></span>
                  <span ng-show="sortType == 'state' && sortReverse" class="fa fa-caret-up"></span>
                </a>
              </th>
            </tr>
            
            <!-- Search Fields -->
            <tr style="background-color:#dfdfdf">
              <td>
              	<input type="text" id="col2" class="form-control" style="width:100%;padding:5px;" ng-model="comp_search.date"/> 
              </td>
              <td>        	
              	<input type="text" id="col1" class="form-control" style="width:100%;padding:5px;" ng-model="comp_search.number"/>          
              </td>
              <td>
              	<input type="text" id="col7" class="form-control" style="width:100%;padding:5px;" ng-model="comp_search.description"/> 
              </td>
              <td>
              	<input type="text" id="col5" class="form-control" style="width:100%;padding:5px;" ng-model="comp_search.state"/> 
              </td>
            </tr>
						
            
          </thead>
          <tbody>
            <tr ng-repeat="comp in results = ( c.data.list | orderBy:sortType:sortReverse | filter:comp_search:strict)">
           		<span id="record-count" style="float: right; font-weight:bold;">Records Found: {{results.length}}</span>
              <input type="text" ng-model="fname" name="fname" ng-value="fname=results.length" ng-hide="true">
              <!-- Date -->
              <td>
                {{comp.date}}
              </td> 
              
              <!-- Number -->            
              <td>
                	{{comp.number}}
              </td>
              
              <!-- Description -->
              <td>
              	{{comp.description}}
              </td>
              
              <!-- State -->
            	<td>
               {{comp.state}}
              </td>  

            </tr>
          </tbody>       
        </table>
      </div>
    </div><!-- End of Tab Content -->

  </div>
</div>

[Sebastian L · Accepted solution]

Ah, it is because of your ng-if here: 

  <div ng-if="c.data.list" class="panel-body vdp table-responsive">

Instead of ng-if, try using ng-show instead: 

<div ng-show="c.data.list.length > 0" class="panel-body vdp table-responsive">

Please mark helpful or mark as correct answer if applicable 🙂 

[mballinger]

That was it! Sorry for not posting what I had prior, but it works like a charm now!