Tab Угловое и Bootstrap

Question

Я использую Angularjs и вкладку Bootstrap здесь мой код:

Это мой HTML:

<div ng-app="MyApp"> 
    <div ng-controller="TabsDemoCtrl"> 
    <div ng-controller="TabsDemoCtrl">  
     <label>Category</label> 
     <select class="form-control" ng-model="product.category" ng-options="category as category.name for category in categories"></select> 

     <br/><br /> 

     <label>Attribute</label> 
     <tabset> 
     <tab ng-repeat="attr in product.category.templateAttribute" heading="{{attr.attribute}}"> 
      <table class="table"> 
      <tbody> 
       <tr> 
       <td> 
        <input class="form-control" value="{{attr.attribute}}" /> 
       </td> 
       <td> 
        <input class="form-control" placeholder="name" ng-model="product.attributes[$index].name" /> 
       </td> 
       <td> 
        <input class="form-control" placeholder="additional price" ng-model="product.attributes[$index].additionalPrice" /> 
       </td> 
       <td rowspan="2"> 
        <button class="btn btn-primary" type="button" ng-click="addItem(product.category.templateAttribute, attr)"> 
        add 
        </button> 
       </td> 
       </tr> 
       <tr> 
       <td colspan="3"> 
        <input class="form-control" type="file" class="form-control" ng-model="product.attributes[$index].file"/> 
       </td> 
       </tr> 
      </tbody> 
      </table> 
     </tab> 
     </tabset> 
    </div> 
    </div> 
</div> 

И это мой JS

angular.module('MyApp', [ 
    'ui.bootstrap']); 

(function(MyApp) { 
    'use strict'; 
    MyApp.controller('TabsDemoCtrl', ['$scope', function($scope) { 
    // categories 
    $scope.categories = [ 
     { 
     name:'custom', 
     templateAttribute: [ 
      {attribute: 'material'}, 
      {attribute: 'soles'}, 
      {attribute: 'size'} 
     ] 
     } 
    ]; 

    // products 
    $scope.products = [ 
    { 
     name: 'custom', 
     category: { 
     name:'custom', 
     templateAttribute: [ 
      { 
      type: "string", 
      attribute: "material" 
      }, 
      { 
      type: "string", 
      attribute: "soles" 
      }, 
      { 
      type: "string", 
      attribute: "size" 
      } 
     ] 
     } 
    } 
    ]; 

    // add menu item 
    $scope.addItem = function(list, item){ 
    list.push(angular.copy(item)); 
    item = {}; 
    }; 

    // remove menu item 
    $scope.removeItem = function(list, index){ 
    list.splice(index ,1); 
    }; 

    }]); 
})(angular.module('MyApp')); 

Например когда я нажимаю кнопку «Добавить» на вкладке «Размер», она откроет новую форму в нижней форме, вот моя первая проблема, когда я нажимаю кнопку «Добавить» на вкладке «Размер», создается вкладка и новая форма.

Live Demo with Complete Code

Wht я сделал, чтобы исправить мой код? Спасибо до

Answer 1

Ваш подход был неправильным. Поскольку вы хотите иметь много элементов внутри атрибута, вы должны поместить коллекцию в каждый атрибут и перебрать ее.

Я отредактировал ваш пример. Вот работающий solution.

Все, что вам нужно, это простой объект так:

$scope.categories = [{ 
     name: 'custom', 
     templateAttribute: [{ 
     attribute: 'material', 
     type: "string", 
     elements: [] 
     }, { 
     attribute: 'soles', 
     type: "string", 
     elements: [] 
     }, { 
     attribute: 'size', 
     type: "string", 
     elements: [] 
     }] 
    }]; 

и по вашему мнению, вы должны сделать что-то вроде этого:

<tabset> 
    <tab ng-repeat="attr in product.category.templateAttribute" heading="{{attr.attribute}}"> 

      <button class="btn btn-primary" type="button" ng-click="addItem(attr)"> 
      add 
      </button> 

      <!-- THIS IS THE CRUCIAL PART --> 
      <div ng-repeat="element in attr.elements"> 
      <table class="table"> 
       <tbody> 

       <!-- ------------------ --> 
       <!-- PUT HERE YOUR FORM --> 
       <!-- ------------------ --> 

       </tbody> 
      </table> 
      <button class="btn btn-primary" type="button" ng-click="removeItem(attr.elements, $index)"> 
         remove 
      </button> 
      <hr /> 
      </div> 

      <br /> 
      <pre>{{attr|json}}</pre> 
    </tab> 
</tabset>