Iterating over ng-repeat, the initial item with a distinct directive

Question

Iterating over ng-repeat, the initial item with a distinct directive

I have this code snippet:

<div ng-repeat="i in placeholders" square class="set-holder {{i.class}}" droppable="{{i.type}}"></div>

How can I ensure that the first item has the directive bigsquare, while the rest have just square?

I attempted:

<div ng-repeat="i in placeholders" {{= $first ? 'big' : ''}}square class="set-holder {{i.class}}" droppable="{{i.type}}"></div>

Unfortunately, the result I get is:

<div ng-repeat="i in placeholders" {{= $first ? 'big' : ''}}square class="set-holder test" droppable="3"></div>

Meaning, the binding does not get compiled.

javascript angularjs angularjs-directive angularjs-ng-repeat

Answer 1

Answer №1

If you want to iterate through a list using AngularJS, you can utilize the ng-repeat-start and ng-repeat-end directives. Here's an example of how to use them:

angular.module('example', [])
  .controller('ctrl', function Ctrl($scope) {
    $scope.items = [1, 2, 3];
  })
  .directive('big', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.css('font-size', '30px');
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="example" ng-controller="ctrl">
  <div ng-repeat-start="item in items" ng-if="$first" big>
    big item {{item}}
  </div>
  <div ng-repeat-end ng-if="!$first">
    item {{item}}
  </div>
</div>

For more information, you can refer to the documentation available at ng-repeat.

Answer 2

If you want to iterate through a list using AngularJS, you can utilize the ng-repeat-start and ng-repeat-end directives. Here's an example of how to use them:

angular.module('example', [])
  .controller('ctrl', function Ctrl($scope) {
    $scope.items = [1, 2, 3];
  })
  .directive('big', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.css('font-size', '30px');
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="example" ng-controller="ctrl">
  <div ng-repeat-start="item in items" ng-if="$first" big>
    big item {{item}}
  </div>
  <div ng-repeat-end ng-if="!$first">
    item {{item}}
  </div>
</div>

For more information, you can refer to the documentation available at ng-repeat.

Answer 3

Answer №2

Check out this example on JSFiddle: http://jsfiddle.net/nicolasmoise/xLfmK/2/.

An innovative approach is to create a single directive where a condition is passed. This directive will dynamically display either a square or a large square based on the condition.

<div ng-repeat="repeat in repeater" condition="$first" square></div>

Important to note: If you prefer not to modify your existing directives, you can implement square as a main directive that orchestrates the behavior of the other two directives.

Answer 4

Check out this example on JSFiddle: http://jsfiddle.net/nicolasmoise/xLfmK/2/.

An innovative approach is to create a single directive where a condition is passed. This directive will dynamically display either a square or a large square based on the condition.

<div ng-repeat="repeat in repeater" condition="$first" square></div>

Important to note: If you prefer not to modify your existing directives, you can implement square as a main directive that orchestrates the behavior of the other two directives.

Answer 5

Answer №3

If you are open to using an additional <div> within your <li>, you can achieve conditional blocks of <div> by utilizing ng-if="$index == ??".

Consider implementing something along these lines:

<div ng-repeat="i in placeholders">
  <div bigsquare class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index == 0">
    ...
  </div>
  <div mediumsquare class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index == 1">
    ...
  </div>
  <div square class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index > 1">
    ...
  </div>
</div>

Although a bit more verbose, this approach neatly segregates the templates, allowing for greater independence between them.

Answer 6

If you are open to using an additional <div> within your <li>, you can achieve conditional blocks of <div> by utilizing ng-if="$index == ??".

Consider implementing something along these lines:

<div ng-repeat="i in placeholders">
  <div bigsquare class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index == 0">
    ...
  </div>
  <div mediumsquare class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index == 1">
    ...
  </div>
  <div square class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index > 1">
    ...
  </div>
</div>

Although a bit more verbose, this approach neatly segregates the templates, allowing for greater independence between them.

Answer 7

Answer №4

<!-- This is a snippet of code that I implemented in one of my angularjs ionic projects. -->
<!-- Using ng-repeat with additional logic -->
<!-- Checking for $first to apply special behavior with <input focus-input> -->
<ion-item class="item item-input item-stacked-label" ng-repeat="input in template.inputs">
  <label class="input-label bh-dark" for="{{input.id}}">{{input.title}}</label>
  <div class="clearfix">
    <div class="bh-left">
      <input ng-if="$first" focus-input id="{{input.id}}" type="{{input.type}}" placeholder="{{input.choices[0]}}" ng-model="input.answer">
      <input ng-if="!$first" id="{{input.id}}" type="{{input.type}}" placeholder="{{input.choices[0]}}" ng-model="input.answer">
    </div>
    <div class="bh-right">
      <i class="icon ion-ios-close-empty bh-icon-clear" ng-click="clearField(input.id)" ng-show="input.answer"></i>
    </div>
  </div>
</ion-item>

Answer 8

<!-- This is a snippet of code that I implemented in one of my angularjs ionic projects. -->
<!-- Using ng-repeat with additional logic -->
<!-- Checking for $first to apply special behavior with <input focus-input> -->
<ion-item class="item item-input item-stacked-label" ng-repeat="input in template.inputs">
  <label class="input-label bh-dark" for="{{input.id}}">{{input.title}}</label>
  <div class="clearfix">
    <div class="bh-left">
      <input ng-if="$first" focus-input id="{{input.id}}" type="{{input.type}}" placeholder="{{input.choices[0]}}" ng-model="input.answer">
      <input ng-if="!$first" id="{{input.id}}" type="{{input.type}}" placeholder="{{input.choices[0]}}" ng-model="input.answer">
    </div>
    <div class="bh-right">
      <i class="icon ion-ios-close-empty bh-icon-clear" ng-click="clearField(input.id)" ng-show="input.answer"></i>
    </div>
  </div>
</ion-item>

Iterating over ng-repeat, the initial item with a distinct directive

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to utilize JSON data in React components?

Convert an array into individual objects and include key-value pairs from a separate object

Poor initial placement of the Dialogs when the content exceeds the space available

Vue.js event handlers

Center the image within the div by setting its position to absolute

Display content based on specific categories from a JSON file using AngularJS

Possible rewrite: "Unable to use jQuery to add elements to data fetched through AJAX requests."

Learn how to use Javascript and ASP.NET to refresh the parent page in Mozilla Firefox browser

Is there a feature in JavaScript that allows for the creation of URLs?

Is it necessary to convert an HTMLCollection or a Nodelist into an Array in order to create an array of nodes?

The query does not produce a match when using the LIKE operator with the retrieved ajax data

What is the best way to calculate the number of div elements with a specific class that are contained within parent div elements with another specific class?

Guide on integrating a third-party API with React using Express

Highcharts - Troubleshooting the chart reflow feature

Is it possible to use jQuery to load content and notify the calling window?

Utilizing JSON format for processing HTTP requests in JavaScript with Node.js

Performing CRUD operations with mongoose and express

Continuously receiving the "Add to home screen" prompt despite already installing the PWA app

TypeError thrown by Basic TypeScript Class

Issue with bootstrap: the ID is not activating even when it is visible