【发布时间】：2015-12-29 23:38:27
【问题描述】：
我是 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});
}
});如果有人可以帮助我，那就太好了。谢谢
【问题讨论】：
-
为什么不对 UI 的每一行和每一列使用 ng-repeat 并且每次单击新行或新列时，您只需附加一个新元素（如果是行，则为数组，如果是数字每行的列数）？
-
为了确保我理解您的解决方案，您能否在我的照片上给我这个方法的结果？它将是 [{0,1,2},{2,0,3}]，对吗？如果我是对的，我忘了提到行和列的名称非常重要，因为这个 Web 应用程序将是一个 Web 服务，而我尝试创建的 json 对象将是这个 Web 服务的结果
-
我的意思是 [[0,1,2],[3,4,5]] 实际上。您可以稍后通过迭代矩阵来提取每一行的名称（matrix.length 是行数，matrix[0].length 是列数）。将它连接到一个字符串相当容易。
标签： javascript angularjs json