Table viewby() function AngularJS

Question!

I have a table that can display data from database but in order to display the data, the API I am using is Post and has two variables for listcount and page. What I want is to display the list of data according to the list the user selects in the dropdown. My html code is of the following:

 <tbody id="myTable">
        <tr ng-repeat=" value in A ">
            <td>{{ value.name }}</td>
            <td>{{ value.number }}</td>
            <td>{{ item.type }}</td>                                                                
            <td style="text-align:center;">
                <button class="btn btn-primary" >Edit</button>
            </td>
        </tr>
    </tbody>



<div class="text-left">
<label>Show List Batch of:</label>

<select ng-model="listcount" ng-change="setItemsPerPage(listcount)">
    <option>3</option>
    <option>5</option>
    <option>10</option>
    <option>20</option>
    <option>30</option>
</select> records at a time.
        <br>
    <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" items-per-page="itemsPerPage"></pagination>
</div>

and my controller is like:

 var page = "1";
 var listCount = "5";
 $scope.data = [];
          $scope.viewby = 10;
          $scope.totalItems = $scope.data.length;
          $scope.currentPage = 1;
          $scope.itemsPerPage = $scope.viewby;
          $scope.maxSize = 5; //Number of pager buttons to show

          $scope.setPage = function (pageNo) {
            $scope.currentPage = pageNo;
          };

          $scope.pageChanged = function() {
            console.log('Page changed to: ' + $scope.currentPage);
          };

        $scope.setItemsPerPage = function(num) {
          $scope.itemsPerPage = num;
          $scope.currentPage = 1; //reset to first paghe
        }

What am I doing wrong?



Answers
**Try It Once**
 <tbody id="myTable">
    <tr ng-repeat=" value in A | orderBy:'name'">
        <td>{{ value.name }}</td>
        <td>{{ value.number }}</td>
        <td>{{ item.type}}</td>                                                                
        <td style="text-align:center;">
            <button class="btn btn-primary" >Edit</button>
        </td>
    </tr>
</tbody>


To make sure all fields are filled before submission of the form:

<input type="radio" required>

The ' required ' attribute makes sure all fields are filled before the form can be submitted.



I don't have the privalage to comment but you can use the required field as follows

 <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" required=true />

using this way the user will have to click all the required fields before submitting a form.



This video can help you solving your question :)
By: admin