CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
ian-campbell
ian-campbell

Reputation: 1665

How to tell if Ng-Repeat has printed x items

How can I tell if there is 1 item displayed by ng-repeat? Like, if ng-repeat items === 1: do something. 

<div ng-controller="mycontroller2">
<form ng-submit="submit()">
   {% csrf_token %}
   Search by name:
   <input ng-model="artistname" />
   <input type="submit" value="submit" />
</form>
<table>
   <tr ng-repeat="name in names | filter:artistname | limitTo:10">
       <!-- if number of "name" === 1 I want the form submitted -->
       <td ng-hide="!artistname">
           <a href="" ng-click="submit()">
           {({ name })}
           </a>
       </td>
   </tr>
</table>

This code reads the input from a user to display a list of links that submit the form. What I want is for the form to submit automatically when the initial list of artist names displayed by ng-repeat is down to 1, since there can be only one dataset from the database at that point anyway.

Upvotes: 0

Views: 88

Answers (5)

ian-campbell
ian-campbell

Reputation: 1665

I had to combine a few answers to get exactly what I was looking for. The <div> element below with ng-if and ng-init functions submits the form when there's one name left.

<form ng-submit="submit()">
    {% csrf_token %}
    Search by name:
    <input ng-model="artistname" />
    <input type="submit" value="submit" />

    <div ng-if="(names | filter:artistname).length===1" ng-init="submit()"></div>
</form>

<table>
   <tr ng-repeat="name in names | filter:artistname | limitTo:10">
       <td ng-hide="!artistname">
           <a href="" ng-click="submit()">
           {({ name })}
           </a>
       </td>
   </tr>
</table>

Now the form submits automatically when there's one name left in the ng-repeat filter.

Upvotes: 0

risto
risto

Reputation: 1304

You can check the length of the names array like this:

<span ng-if="names.length === 1">Do something</span>

Just add ng-if to the same element that has ng-repeat, and then it will be conditional.

Update:

You can listen to the logic in a controller using $watch:

$scope.$watch('names', function() {
  if (names.length === 1) {
    // Do something
  }
}

Upvotes: 1

Brocco
Brocco

Reputation: 64893

The answer risto provided is along the right lines, just needs to be tweaked to determine if there is only a single value after the filter has been applied

<form ng-submit="submit()">
    {% csrf_token %}
    Search by name:
    <input ng-model="artistname" />
    <input type="submit" value="submit" 
           ng-disabled="(names | filter:artistname).length === 1" />
 </form>

The filtering will change the number of elements displayed, but will not change the length of the names array.

Upvotes: 1

Prahlad Yeri
Prahlad Yeri

Reputation: 3653

Add something like this in your form block:

<div ng-if="names.length == 1">
    <script type="text/javascript">
    $("#myform").submit(); 
    </script>
</div>

Upvotes: 1

Mosho
Mosho

Reputation: 7078

This needs to happen in the controller.

if ($scope.names.length === 1) $scope.submit()

Upvotes: 0

Related Questions