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

I have a question, how can I dynamically add a tabbed item to a list.

If there is only one item in the list, everything is fine

The problem is that if I try to load a list of user tabs with device information, this will be overestimated by the last user.

enter image description here

This is an element of my tabs 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");
      }      
    });
  };
});
+4
source share
1 answer

, , ng-repeat="tab in tabs" . json response, , , . , $scope.tabs = userDevices;, 2D-, : $scope.tabs[user_id] = userDevices;.

: ng-repeat="tab in tabs[user_id]".

, , , , .

0

Source: https://habr.com/ru/post/1652563/


All Articles