个人中心
gpt4 book ai didi

javascript - 使用 angularjs 创建动态 json 矩阵

转载 作者：行者123 更新时间：2023-11-28 15:14:50 25 4
gpt4 key购买 nike

我是 Angularjs 的新手，这是我在论坛上的第一篇文章，但我尝试了很长时间来使用 Angularjs 创建动态矩阵。经过一些研究后，我不确定使用 Angularjs 是否真的可以实现我想要做的事情。让我给你看一张图片来解释我的期望:

例如，对于这张图片，我想创建这个 JSON 对象:

{
  "row1": {
      "column1": 0,
      "column2": 1,
      "column3": 2
   }
   "row2": {
      "column1": 2,
      "column2": 0,
      "column3": 3
   }}

当然，我们可以添加具有不同名称的新列或新行，这就是它是动态的。目前我在代码方面有这个:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/addMatrix.js"></script>
</head>
<body>
	<div ng-app="App" ng-controller="MainCtrl">
		<p>Add a new element :</p>
		<table>
			<tr>
				<td data-ng-repeat="data in texts">
					<button>{{data.text}}</button>
				</td>
				<td data-ng-repeat="field in fields">
					<form ng-submit="submit(text)">
						<input type="text" ng-model="text" name="text"
							placeholder="New Category" />
					</form>
				</td>
				<td>
					<button ng-click="addNewChoice()">+</button>
				</td>
			</tr>
		</table>
		<div ng-if="texts.length > 0 && hasMatrix">
			<table>
				<tr>
					<td>
						<p></p>
					</td>
					<td data-ng-repeat="column in columns">{{column.id}}</td>
				</tr>
				<tr data-ng-repeat="row in rows">
					<td>{{row.id}}</td>
					<td data-ng-repeat="column in columns">
							<select name="singleSelect">
								<option>0</option>
								<option>1</option>
								<option>2</option>
								<option>3</option>
							</select>
					</td>
				</tr>
			</table>
			<br/>
			<button ng-click="addColumn()">Add a column</button>
			<button ng-click="addRow()">Add a row</button>
			<button>Validate</button>
			<br /> <br />
			<form ng-submit="process(data)" ng-if="hasClicked">
				name : <input type="text" ng-model="data" name="data"
					placeholder="name" />
			</form>
		</div>
		<div ng-if="texts.length > 0 && !hasMatrix">
			<button ng-click="create()">Create a new Matrix</button>
		</div>
		<div ng-if="firstRowColumn">
			<form>
				First row's name : <input type="text" ng-model="matrix.row"
					name="row" placeholder="New Category" /><br /> First Column's name
				: <input type="text" ng-model="matrix.column" name="column"
					placeholder="New Category" /><br /> <input type="submit"
					ng-click="createFirst(matrix)" value="generate" />
			</form>
		</div>
	</div>
</body>
</html>

Angularjs

var myApp = angular.module('App', []);

myApp.controller('MainCtrl',function ($scope) {
	$scope.fields=[];
	$scope.texts=[];
	$scope.hasMatrix = false;
	$scope.hasClicked = false;
	$scope.firstRowColumn = false;
	$scope.hasNewRow = false;
	$scope.hasNewColumn = false;
	$scope.rows=[];
	$scope.columns=[];
	$scope.test = {
		    singleSelect: null,
    };
	$scope.addNewChoice = function() {
		var newItem = $scope.fields.length + 1;
		if (newItem < 2) {
			$scope.fields.push({'id' : 'field' + newItem});
		}
	};
	$scope.process = function(data) {
		if ($scope.hasNewRow) {
		   $scope.rows.push({'id' : data});
		}
		if ($scope.hasNewColumn) {
			$scope.columns.push({'id' : data});
		}
		$scope.hasNewColumn = false;
		$scope.hasNewRow = false;
		$scope.hasClicked = false;
	};
	
	$scope.addRow = function() {
		$scope.hasClicked = true;
		$scope.hasNewRow = true;

	};
	$scope.addColumn = function() {
		$scope.hasClicked = true;
		$scope.hasNewColumn = true;

	};	
	$scope.create = function(field) {
		$scope.input = field;
	};
	
	$scope.submit = function(text) {
	    var lastItem = $scope.fields.length - 1;
	    $scope.fields.splice(lastItem);
        $scope.texts.push({'text' : text});    
	};
	$scope.create = function() {
		$scope.firstRowColumn = true;
	};
	$scope.createFirst = function(matrix) {
		$scope.firstRowColumn = false;
		$scope.hasMatrix = true;
		$scope.rows.push({'id' : matrix.row});
		$scope.columns.push({'id' : matrix.column});
	}
});

如果有人能帮助我那就太好了。谢谢

最佳答案

你可以，而且它非常适合 Angular 模型。我在下面实现了一个非常简单的版本，它将矩阵表示为数字数组的数组，并使用第一行(必须始终存在)来确定列数；您可以将其扩展为更适合您的用例的内容。

下面的代码有 2 个陷阱:

  • 单元格的 ng-model 使用 row[$index]，而不是看似等效的 cell
  • 列的 ng-repeat 使用 track by $index

对于 ng-model="row[$index]"，这是由于 Angular 中 2 向绑定(bind)的工作方式造成的:您必须引用一个对象(行数组)而不是一个原始的，以便它可以检测更新。您可以在 this SO 找到详细信息.

对于ng-repeat="... track by $index"，这是为了避免“dupes”错误。 ng-repeat 需要一种方法来跟踪正在迭代的集合的唯一元素；如果你要迭代一个对象集合，Angular 知道要做什么(注意，迭代行时我不需要这样做，因为每一行都是一个数组，这是 JS 中的一种对象类型)；否则，您需要告诉它每个元素的唯一性(在本例中，是其在集合中的位置，由 $index 提供)。您可以在this Angular docs page中找到更多详细信息.

angular.module('App', [])
.controller('MainCtrl', ['$scope', function($scope) {
  $scope.matrix = [[0]];
  
  $scope.addColumn = function() {
    $scope.matrix.forEach(function(row) {
      row.push(0);
    });
  };
  
  $scope.addRow = function() {
    var columnCount = $scope.matrix[0].length;
    var newRow = [];
    for (var i = 0; i < columnCount; i++) {
      newRow.push(0);
    }
    $scope.matrix.push(newRow);
  };

  $scope.deleteRow = function(idx) {
    if (idx >= 0 && idx < $scope.matrix.length) {
      $scope.matrix.splice(idx, 1);
    }
  };
  
  $scope.deleteColumn = function(idx) {
    if (idx >= 0 && idx < $scope.matrix[0].length) {
      $scope.matrix.forEach(function(row) {
        row.splice(idx, 1);
      });
    }
  };

}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<div ng-app="App" ng-controller="MainCtrl">
  <table>
    <tbody>
      <tr>
        <th></th>
        <th ng-repeat="column in matrix[0] track by $index">
          <button ng-disabled="matrix[0].length <= 1"
                  ng-click="deleteColumn($index)">
            Delete
          </button>
        </th>
      </tr>
      <tr ng-repeat="row in matrix">
        <th>
          <button ng-disabled="matrix.length <= 1"
                  ng-click="deleteRow($index)">
            Delete
          </button>
        </th>
        <td ng-repeat="cell in row track by $index">
          <input type="number" ng-model="row[$index]">
        </td>
      </tr>
    </tbody>
  </table>
  <button type="button" ng-click="addRow()">Add Row</button>
  <button type="button" ng-click="addColumn()">Add Column</button>
  <h3>As JSON:</h3>
  <pre><code>{{matrix | json}}</code></pre>
</div>

关于javascript - 使用 angularjs 创建动态 json 矩阵，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34520833/

25 4 0
文章推荐： ios - [__NSArray0 objectAtIndex :]: index 0 beyond bounds for empty NSArray
文章推荐： html - 显示 flex 不拉伸(stretch) div
文章推荐： swift - Xcode 8 Interface Builder 在将按钮链接到 IBOutlets 时在类名中放置了错误的空格
文章推荐： javascript - 在 React js 中加载 Muicss 样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com