Question

有人帮助我，我目前有这些工作代码：

HTML：

<body ng-controller="ExampleCtrl">  
        <label>Category:</label>
          <select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
          </label><br/><br />

          <table class="table" ng-repeat="attr in product.category.templateAttribute">
          <thead>
            <tr>
              <th colspan="4">{{attr.attribute}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input value="{{attr.attribute}}" />
              </td>
              <td>
                <input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
              </td>
              <td>
                <input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
              </td>
              <td rowspan="2">
                <button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
                  add
                </button>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file"/>
              </td>
            </tr>
          </tbody>
        </table>

JS

function ExampleCtrl($scope){
  $scope.categories = [
    {
      name:'custom', 
      templateAttribute: [
        {attribute: 'material'},
        {attribute: 'soles'},
        {attribute: 'size'}
      ]
    }
  ]; 

  $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('app', [])
.controller("ExampleCtrl", ExampleCtrl)

演示： Seet Demo

我的问题是，当我在上面填写一个表单并单击添加按钮时，它将显示一个新表单，但该表单始终具有相同的值。如何解决我的问题？

Answer 1

在推入{}数组之前，

list应定义为attr。

如果您不想通过视图发送任何模型数据，则无法向controller

发送

// Code goes here

function ExampleCtrl($scope) {
  $scope.categories = [{
    name: 'custom',
    templateAttribute: [{
      attribute: 'material'
    }, {
      attribute: 'soles'
    }, {
      attribute: 'size'
    }]
  }];

  $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) {
    item = {};
    list.push(angular.copy(item));
  };

  // remove menu item
  $scope.removeItem = function(list, index) {
    list.splice(index, 1);
  };
}

angular
  .module('app', [])
  .controller("ExampleCtrl", ExampleCtrl)

参数

试试这个：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="ExampleCtrl">
  <h3>How to fix this</h3>
  <p>My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. Demo:</p>
  <label>Category:
    <select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
  </label>
  <br/>
  <br />

  <table class="table" ng-repeat="attr in product.category.templateAttribute">
    <thead>
      <tr>
        <th colspan="4">{{attr.attribute}}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input value="{{attr.attribute}}" />
        </td>
        <td>
          <input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
        </td>
        <td>
          <input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
        </td>
        <td rowspan="2">
          <button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
            add
          </button>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file" />
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

＆＃13;

{{1}}

＆＃13;

Codepen demo

单击按钮添加后复制的表单

1 个答案: