CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Raihan
Raihan

Reputation: 4001

Access the first item from ng-repeat

I have a list of disabled input field created via ng-repeat Plunker

<ul>
  <li ng-repeat="name in names">
   <input type="text" disabled value="{{name.item}}"/>
  </li>
</ul>

How can I make the first input field not disabled ? Thanks in advance

Upvotes: 1

Views: 5965

Answers (3)

Martin Thorsen Ranang
Martin Thorsen Ranang

Reputation: 2415

You can use ng-disabled and check the ng-repeat directive's $first variable:

<ul>
  <li ng-repeat="name in names">
    <input type="text" ng-disabled="!$first" value="{{name.item}}"/>
  </li>
</ul>

You could similarly check for $middle, $last, $even, and $odd. If you use $index, you can check for arbitrary row indexes.

Since ng-repeat creates an isolated scope, in the case of a nested ng-repeat, if you want only the first item in the first parent to be enabled, the relevant code would look like:

<div ng-repeat="item in items">
  <ul>
    <li ng-repeat="name in names">
      <input type="text" ng-disabled="!$parent.$first || !$first" value="{{name.item}}"/>
    </li>
  </ul>
</div>

where you access the outer scope's $first (or $index) variable through the inner ng-repeat's $parent variable. I created a fork of your Plunker that shows how this can be done.

Upvotes: 6

SethGunnells
SethGunnells

Reputation: 1269

This is what you're looking for!

<ul>
  <li ng-repeat="name in names">
    <input type="text" ng-disabled="!$first" value="{{name.item}}"/>
  </li>
</ul>

You can see the documentation for ng-repeat for more special variables like $first.

Upvotes: 3

KJ Price
KJ Price

Reputation: 5964

You are looking for $index. So, just check if the current $index is not the first "0th":

<ul>
  <li ng-repeat="name in names">
   <input type="text" ng-disabled="$index != 0" value="{{name.item}}"/>
  </li>
</ul>

Upvotes: 3

Related Questions