如何在列表中动态添加带有选项卡的元素。角度js

Question

我有一个问题，如何在列表中动态添加带有标签的元素。

问题是，如果我尝试加载带有设备信息的用户选项卡列表，则会被最后一个用户覆盖。

这是我的 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>

还有我的控制器：

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");
      }      
    });
  };
});

Answer 1

您的视图中似乎有ng-repeat="tab in tabs"。很难弄清楚 json response，但我猜它包含搜索返回的多个用户的数据。如果是这样，而不是分配$scope.tabs = userDevices;，你应该有一个二维数组，比如：$scope.tabs[user_id] = userDevices;。

然后在视图中，您可以遍历用户特定的选项卡：ng-repeat="tab in tabs[user_id]"。

我希望它有所帮助，尽管您提出的问题没有足够的细节来了解您的问题到底出在哪里。