如何使用列表中的选项卡动态添加元素。角度js

时间:2016-08-26 07:46:29

标签: javascript jquery angularjs angularjs-directive

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

If list have only one item everything is OK

问题是,如果我尝试加载用户列表,则设备信息会被上一个用户覆盖。

enter image description here

这是我在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");
      }      
    });
  };
});

1 个答案:

答案 0 :(得分:0)

您似乎在视图中有ng-repeat="tab in tabs"。很难找出json response,但我猜它包含搜索返回的多个用户的数据。如果是这样,您应该使用2D数组,而不是指定$scope.tabs = userDevices;,而不是$scope.tabs[user_id] = userDevices;

然后在视图中,您可以迭代用户特定的标签:ng-repeat="tab in tabs[user_id]"

我希望它有所帮助,尽管你提出的问题没有足够的细节来了解你的问题究竟在哪里。