Using data-ng-repeat with various elements in Angular

Question

Using data-ng-repeat with various elements in Angular

Within the Angular controller, there is a variable that contains the following:

$scope.items = [
  { title: 'x', type: 'x'},
  { title: 'y', type: 'y'}
];

Currently, there are only 2 items in the array, but there will be more added in the future. To display this array in HTML, I plan on using the ng-repeat Angular directive. However, I am facing a challenge: I need to render a different HTML tag based on the type of each item. For items with type 'x', I need to render <x-tag>, and for items with type 'y', I need to render <y-tag>. How can I achieve this? Any help is greatly appreciated!

javascript angularjs

Answer 1

Answer №1

Include a :filter within the ng-repeat directive:

var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
  $scope.items = [{
    title: 'x',
    type: 'x'
  }, {
    title: 'y',
    type: 'y'
  }, , {
    title: 'another x',
    type: 'x'
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
  <div>Display only items with type 'x':</div>
  <ul>
    <li ng-repeat="item in items | filter: {type: 'x'} ">{{item.title}}</li>
  </ul>

</div>

Answer 2

Include a :filter within the ng-repeat directive:

var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
  $scope.items = [{
    title: 'x',
    type: 'x'
  }, {
    title: 'y',
    type: 'y'
  }, , {
    title: 'another x',
    type: 'x'
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
  <div>Display only items with type 'x':</div>
  <ul>
    <li ng-repeat="item in items | filter: {type: 'x'} ">{{item.title}}</li>
  </ul>

</div>

Answer 3

Answer №2

Combine ng-repeat and ng-switch in your AngularJS app:

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  $scope.items = [
    { title: "TestX", type: "x" },
    { title: "TestY", type: "y" }
  ];
});

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

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in items">
    {{ item.title }}
    <div ng-switch="item.type">
      <div ng-switch-when="x">
        HTML for type x
      </div>
      <div ng-switch-when="y">
        HTML for type y
      </div>
    </div>
  </div>
</div>

Answer 4

Combine ng-repeat and ng-switch in your AngularJS app:

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  $scope.items = [
    { title: "TestX", type: "x" },
    { title: "TestY", type: "y" }
  ];
});

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

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in items">
    {{ item.title }}
    <div ng-switch="item.type">
      <div ng-switch-when="x">
        HTML for type x
      </div>
      <div ng-switch-when="y">
        HTML for type y
      </div>
    </div>
  </div>
</div>

Answer 5

Answer №3

In addition to ng-hide, you can hide an element if a certain condition is met.

<div ng-repeat="item in items" >
        <div ng-hide="item.type == 'y'">
        {{ item.type }}
        </div>
        <div ng-hide="item.type == 'x'">
        {{ item.type }}
        </div>
</div>

Answer 6

In addition to ng-hide, you can hide an element if a certain condition is met.

<div ng-repeat="item in items" >
        <div ng-hide="item.type == 'y'">
        {{ item.type }}
        </div>
        <div ng-hide="item.type == 'x'">
        {{ item.type }}
        </div>
</div>

Answer 7

Answer №4

When you need to display items of type x exclusively, you can utilize the 'filter' attribute within the ng-repeat directive or use ng-if.

<div ng-repeat="item in items"> 
    <div ng-if="item.type==='x'">
       <p>Showing items of type x</p>
    </div>
</div>

Answer 8

When you need to display items of type x exclusively, you can utilize the 'filter' attribute within the ng-repeat directive or use ng-if.

<div ng-repeat="item in items"> 
    <div ng-if="item.type==='x'">
       <p>Showing items of type x</p>
    </div>
</div>

Using data-ng-repeat with various elements in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best approach to assigning a default value to each cascading dropdown using Angular?

The dropdown menu is malfunctioning when accessed within the mobile view of a jQuery

Conceal rows in the table until the search (filterBy) is completed

What is the reason for React.Component being implemented as a function rather than an ES6 class?

Unique syntax using markdown-react

"Encountered an issue while attempting to access properties that are undefined, specifically with the operation 'includes

Express.js throwing an unexpected 404 error

What is the process for defining custom properties for RequestHandler in Express.js middleware functions?

Link the Sass variable to Vue props

Tips for configuring <link> in NextJs to only activate on a single click

Exchange of Fusion Chart

Troubleshooting React on an Apache Server: A Comprehensive Guide

A step-by-step guide on how to fill a Vuetify select box with data retrieved from

Adding a JSON object or model to your whitestorm.js environment: Step-by-step guide

Dynamic Website (Link Relationships / Responsive Design / Content Rendering with CSS and HTML)

When selecting a dropdown in Angular 5, the aria-expanded attribute remains unchanged and the 'show' class is not applied. This behavior is specific to Bootstrap dropdowns

Check the validity of a watched variable's value and block any assignments that do not meet the specified requirements without triggering the watch function

Understanding how to sum the values of two separate dropdown selections using jQuery

Leveraging dynamic visuals for your Twitter metadata image

Enhance Compatibility: IE11 URL Polyfill