Question

我正在尝试在Angular.js中创建动态表，其中用户在提供的文本框中输入列数。然后在每个列下添加按钮，以添加尽可能多的单元格。该单元格只会添加到那个列中。我正在使用 ng-repeat 重复列数和添加按钮。我能够在变量中获得用户的响应，即用户想要添加单元格的列。有人可以给我一个控制器，通过使用ng-repeat，ng-model或不使用它来将单元格添加到选定的列。我的表代码看起来有点像这样：

<table>
        <tr>
            <th ng-repeat="n in arr track by $index">SET {{n.setalpha}} </th><!--table heading, dont mind this-->
        </tr>
        <tr ng-repeat="<!--something goes here-->">
            <!--<select ng-model="name" ng-options="options.topicname for options in topics"></select>-->
        </tr>
        <tr>
            <td ng-repeat="n in arr track by $index">
                <button ng-click="addSelected($index+1)">add{{$index+1}}</button>
            </td>
        </tr>
    </table>

其中：n in arr track by $index，用于重复表标题和添加按钮说'n'次，addSelected($index+1)是控制器为的函数：

$scope.addSelected = function (setno) {
    console.log(setno);
    $scope.thisset = setno;

}

，$scope.thisset是我拥有用户响应的变量，即用户想要添加单元格的列。注意：我想在列中添加用户想要的单元格。不在所有列中。我的代码：

var app = angular.module('topicSelector', []);


app.controller('topicController', function ($scope) {

    $scope.arr = [];
    $scope.thisset = -1; //tells in which set, cell has to added.



    $scope.topics = [
        {
            topicid: "1",
            topicname: "history"
        },
        {
            topicid: "2",
            topicname: "geography"
        },
        {
            topicid: "3",
            topicname: "maths"
        }
    ];








    $scope.DefineSets = function () {

        for (var i = 1; i <= $scope.no_of_sets; i++) {
            $scope.arr.push({
                setno: i,
                setalpha: String.fromCharCode(64 + i)
            });

        };
    };

    $scope.addSelected = function (setno) {
        console.log(setno);
        $scope.thisset = setno;

    }



});

table {
    width: 100%;
}

<!doctype html>
<html ng-app="topicSelector">

<head>
    <title>
        topic selector
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h3>Enter number of sets:</h3>
    <div ng-controller="topicController">
        <form ng-submit="DefineSets()">
            <input type="text" ng-model="no_of_sets" placeholder="number of sets" name="no_of_sets">
            <button>Submit</button>
        </form>
        <br>
        <br>

        <table>
            <tr>
                <th ng-repeat="n in arr track by $index">SET {{n.setalpha}} </th>
            </tr>
            <!--<tr ng-repeat="">
    <select ng-model="name" ng-options="options.topicname for options in topics"></select>
</tr>-->
            <tr>
                <td ng-repeat="n in arr track by $index">
                    <button ng-click="addSelected($index+1)">add{{$index+1}}</button>
                </td>
            </tr>
        </table>



    </div>
</body>

</html>

LINK TO PLUNK PLUNK

Answer 1

在下面的示例中，我使用了列表而不是带有显示的表格，恕我直言，这是一种更好的方法：

＆＃13;

(function (angular) {
"use strict";
  function GrowController ($log) {
    var vm = this;
    vm.cols = [];
    vm.size = 0;
    vm.sizeChanged = function () {
      var size = vm.size, cols = vm.cols,
          diff = size - cols.length;
      $log.debug("Size changed to", size, cols);
      if (diff > 0) {
        for (var i = 0; i < diff; i++) {
          cols.push([]);
        }
      } else {
        cols.splice(diff, -diff);
      }
    };
    vm.addCell = function (index) {
      var cols = vm.cols;
      $log.debug("Cell added in column", index);
      cols[index].push(index + "." + cols[index].length);
    };
  }

   angular.module("app",[])
        .controller("GrowController", ["$log", GrowController]);
}(angular));

＆＃13;

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cols {
  display: flex;
}
.cells {
  display: flex;
  flex-direction: column;
}
button.add-cell {
  display: block;
}

＆＃13;

<div ng-controller="GrowController as $ctrl" ng-app="app" ng-strict-di>
<p>
    <label for="size">Number of columns(0-10):</label>
    <input id="size" type="number" ng-model="$ctrl.size" ng-change="$ctrl.sizeChanged()" min="0" max="10">
</p>
<ul class="cols" ng-if="$ctrl.cols.length">
    <li ng-repeat="col in $ctrl.cols">
        <button class="add-cell-button" ng-click="$ctrl.addCell($index)">Add cell</button>
        <ul class="cells" ng-if="col.length">
            <li ng-repeat="cell in col">{{ ::cell }}</li>
        </ul>
    </li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

＆＃13;

无论如何，我Angularjs 1.5.6你应该考虑使用＆＃34;组件＆＃34;而不是＆＃34;控制器＆＃34;和＆＃34;单面＆＃34;绑定。

使用添加按钮向表添加单元格

1 个答案: