NG - a loop to loop through a complicated array such as this

Question

NG - a loop to loop through a complicated array such as this

I am working with an array that looks like this:

$scope.disArray = [0, -5, -10, -15, [-11, -12,-13, -14], [-12, -13, -14]];

My goal is to display the elements of the array in a table where direct values are shown as input type text and arrays as select dropdowns.

The Expected Output should look like this:

<tr>
    <td>0</td>
    <td>-5</td>
    <td>-10</td>
    <td>-15</td>
    <td>
      <select>
         <option>-11</option>
         <option>-12</option>
         <option>-13</option>
         <option>-14</option>
      </select>
    </td>
    <td>
      <select>
         <option>-11</option>
         <option>-12</option>
         <option>-13</option>
         <option>-14</option>
      </select>
    </td>

Any assistance in achieving this would be greatly appreciated. Thank you in advance.

angularjs angularjs-ng-repeat

Answer 1

Answer №1

Give this a try

var app=angular.module("app",[]);

app.controller("myCtrl",function($scope){
   $scope.isArray = angular.isArray;
   $scope.disArray = [0, -5, -10, -15, [-11, -12,-13, -14], [-12, -13, -14]];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <table>
    <tbody>
       <tr>
          <td ng-repeat="value in disArray">
             <span ng-if="!isArray(value)">{{value}}</span>
             <select ng-if="isArray(value)" ng-options="val for val in value" ng-model="selected"></select>
    
           </td>
         </tr>
      </tbody>
    </table> 
</div>

Answer 2

Give this a try

var app=angular.module("app",[]);

app.controller("myCtrl",function($scope){
   $scope.isArray = angular.isArray;
   $scope.disArray = [0, -5, -10, -15, [-11, -12,-13, -14], [-12, -13, -14]];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <table>
    <tbody>
       <tr>
          <td ng-repeat="value in disArray">
             <span ng-if="!isArray(value)">{{value}}</span>
             <select ng-if="isArray(value)" ng-options="val for val in value" ng-model="selected"></select>
    
           </td>
         </tr>
      </tbody>
    </table> 
</div>

Answer 3

Answer №2

Here is one way to achieve it:

HTML :

<tr>
    <td ng-repeat="item in itemList">
        <span  ng-if="!isArray(item)" ng-bind="item"> </span>

        <select   ng-if="isArray(item)"  ng-model="selectedItem"  ng-options="option for option in item ">
        </select>    
    </td>
</tr>

JS :

$scope.itemList = [0, -5, -10, -15, [-11, -12,-13, -14], [-12, -13, -14]];

    $scope.isArray = function(element){
        return angular.isArray(element);
    }

Answer 4

Here is one way to achieve it:

HTML :

<tr>
    <td ng-repeat="item in itemList">
        <span  ng-if="!isArray(item)" ng-bind="item"> </span>

        <select   ng-if="isArray(item)"  ng-model="selectedItem"  ng-options="option for option in item ">
        </select>    
    </td>
</tr>

JS :

$scope.itemList = [0, -5, -10, -15, [-11, -12,-13, -14], [-12, -13, -14]];

    $scope.isArray = function(element){
        return angular.isArray(element);
    }

NG - a loop to loop through a complicated array such as this

The Expected Output should look like this:

Answer №1

Answer №2

Similar questions

When using Angular 2 Forms, the formControl.touched property will only be set to true when the text area is clicked, rather

Change the code from a for-loop to use the Array#map method

Tips for turning on a gaming controller before using it

AngularJS iOS keyboard not disappearing post iOS 10 update

Decoding a Json list with angularJS

SheetJS excel-cell customization

Finding a specific object within an array of objects by searching through a key value pair

Typescript versus ES5: A comparison of Node.js server-side applications written in different languages

Using Angular promises and the $http service

Having issues with default sorting and searching not functioning in Datatables with Angularjs

Angular login/signup modal/dialog component for seamless user authentication

Characteristics within the primary template element of a directive

Is it possible to return a promise within the .then function in AngularJS?

Firebase 3 authentication does not maintain persistent login sessions

The Angular JS Factory fails to send data back to the controller

Incorporating HTML with ng-binds through transclusion

Where can I locate a specific child element in this scenario?

Developing an Angular Chart with AJAX

Is it possible to dynamically insert one module into another module?

Handling JSON Data in JavaScript