How to dynamically add element with tabs in the list. Angular js

user2996120

I have a question how can I dynamically add element with tabs in the list.

If list have only one item everything is OK

Problem is that if I try to load list of users tabs with devices info is overided from last user.

enter image description here

This is my Tabs item in HTML:

<div class="sample tabsdemoDynamicTabs" layout="column" ng-cloak="">
            <md-content class="md-padding">
            <md-tabs  md-border-bottom="" md-autoselect="">
                <md-tab ng-repeat="tab in tabs" ng-disabled="tab.disabled" label="{{tab.title}}">
                <div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
                    <div class="cardContentSmall" ng-bind="tab.content.objectId"></div> 
                    <div class="cardContentSmall" ng-bind="tab.content.password"></div>
                    <div class="cardContentSmall" ng-bind="tab.content.version"></div>
                    <div class="cardContentSmall" ng-bind="tab.content.mac"></div>
                    <div class="cardContentSmall" ng-bind="tab.content.serialNumber"></div>
                    <div class="cardContentSmall" ng-bind="tab.content.createdAt"></div>
                    <div class="cardContentSmall" ng-bind="tab.content.updatedAt"></div>                                
                </div>
                </md-tab>
            </md-tabs>
            </md-content>                       
</div>

And my controller:

app.controller('SearchController', function($scope, $state, $compile, $element, searchService, toastService) {
if(Parse.User.current()) {
  $scope.$parent.title = "Search";
  $scope.$parent.imageSrc = "images/icon/search_icon.png";
}

$scope.searchService = function(keyword, param1) { 
      searchService.find(keyword, param1, function(response, error) {
        if(response) {
              $scope.$apply(function(){                 
                 $scope.response = ParseArrayToJSON(response);
                 for(var i = 0; i < response.length; i++){
                    var userDevices = [];
                    if(response[i].get('devices') != null){
                        var devices = ParseArrayToJSON(response[i].get('devices'));
                        console.log("devices: " + devices.length);                          
                            for(var j = 0; j < devices.length; j++){                                    
                                var device = devices[j];                         
                                var deviceCount = "Device " + j;
                                var content = {
                                    "objectId" : "Object ID: "  + device["objectId"],
                                    "password" : "Password: " + device["password"],
                                    "version" : "Version: " + device["version"],
                                    "mac" : "MAC address: " + device["mac"],
                                    "serialNumber" : "Serial number: " + device["serial_number"],
                                    "createdAt" : "Created at: " + device["createdAt"],
                                    "updatedAt" : "Updated at: " + device["updatedAt"]                                      
                                }
                                var item = {
                                    "title" : deviceCount, 
                                    "content" : content
                                }                    
                                userDevices.push(item);
                            }       

                        $scope.tabs = userDevices;      

                    }                    
                 }                           
          });         
        } else {
        toastService.show("No results");
      }      
    });
  };
});
MatFiz

You seem to have ng-repeat="tab in tabs" in the view. It is difficult to figure out json response, but I guess it contains data for multiple users returned by search. If so, instead of assigining $scope.tabs = userDevices;, you should rather have a 2D array, like: $scope.tabs[user_id] = userDevices;.

Then in the view, you can iterate over user-specific tabs: ng-repeat="tab in tabs[user_id]".

I hope it helps, although the question asked by you does not have enough details to understand where your problem really is.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to dynamically add HTML element/content - Angular

From Dev

Dynamically add to a list in angular

From Dev

how to generate list dynamically in angular.js

From Dev

Dynamically add element in JS to XUL

From Dev

How to dynamically add ng-repeat to an element inside an angular directive?

From Dev

How do I dynamically add tab to tabs?

From Dev

How do I dynamically add tab to tabs?

From Dev

How to add element in the end of array Angular JS?

From Dev

How to add mouseenter event for dynamically added element with native JS

From Dev

react.js - how to add element on success in dynamically generated button?

From Dev

how to add row dynamically in angular .js on button click?

From Dev

how to add row dynamically in angular .js on button click?

From Dev

Add list elements dynamically to ul element

From Dev

Dynamically add new element to specific list

From Dev

Dynamically add angular attributes to an element from a directive

From Dev

How to add an element to a list?

From Dev

How to add an element to a list?

From Dev

How to add content to Angular Material Tabs

From Dev

How to add tabs to a tabpanel in Ext Js

From Dev

How to add a value from input and a created element with JS to the list?

From Dev

How to add tabs in tabview in primefaces, dynamically, on click of a command button?

From Dev

R Shiny: How to add data tables to dynamically created tabs

From Dev

How to add/remove a class to the parent element of a checkbox on change in Angular js

From Dev

Dynamically add tabs to TabControl container

From Dev

How to select first element in select list Angular JS?

From Dev

Dynamically add and remove events in angular.js

From Dev

Add textarea control dynamically in Angular JS

From Dev

How to add CSS class dynamically to html element

From Dev

How to add dynamically extended element with Polymer?

Related Related

  1. 1

    How to dynamically add HTML element/content - Angular

  2. 2

    Dynamically add to a list in angular

  3. 3

    how to generate list dynamically in angular.js

  4. 4

    Dynamically add element in JS to XUL

  5. 5

    How to dynamically add ng-repeat to an element inside an angular directive?

  6. 6

    How do I dynamically add tab to tabs?

  7. 7

    How do I dynamically add tab to tabs?

  8. 8

    How to add element in the end of array Angular JS?

  9. 9

    How to add mouseenter event for dynamically added element with native JS

  10. 10

    react.js - how to add element on success in dynamically generated button?

  11. 11

    how to add row dynamically in angular .js on button click?

  12. 12

    how to add row dynamically in angular .js on button click?

  13. 13

    Add list elements dynamically to ul element

  14. 14

    Dynamically add new element to specific list

  15. 15

    Dynamically add angular attributes to an element from a directive

  16. 16

    How to add an element to a list?

  17. 17

    How to add an element to a list?

  18. 18

    How to add content to Angular Material Tabs

  19. 19

    How to add tabs to a tabpanel in Ext Js

  20. 20

    How to add a value from input and a created element with JS to the list?

  21. 21

    How to add tabs in tabview in primefaces, dynamically, on click of a command button?

  22. 22

    R Shiny: How to add data tables to dynamically created tabs

  23. 23

    How to add/remove a class to the parent element of a checkbox on change in Angular js

  24. 24

    Dynamically add tabs to TabControl container

  25. 25

    How to select first element in select list Angular JS?

  26. 26

    Dynamically add and remove events in angular.js

  27. 27

    Add textarea control dynamically in Angular JS

  28. 28

    How to add CSS class dynamically to html element

  29. 29

    How to add dynamically extended element with Polymer?

HotTag

Archive