0
두 개의 JSON 배열이 있는데 하나는 헤더 용이고 다른 하나는 데이터 용입니다. 헤더를 처리 중이며 이제 ng-repeat를 사용하여 데이터를 표시하고 있습니다. 잘 작동합니다. 하지만, 나는보기에서 $ scope.data에 동적으로 데이터를 추가하고 싶다. 테이블의 마지막 행에 '행 추가'버튼을 클릭하고 마지막 행을 입력란에 각각 채 웁니다. 여기에서 나는 진행하는 방법을 찾지 못한다. 왜냐하면 나는 각도 js에서 새로운 것이다.각도 js의 JSON 배열에 동적으로 필드 추가
도와주세요.
HTML 코드와 JS가 아래에 붙여 넣어집니다.
'use strict';
angular.module('mean.system').controller('IndexController', ['$scope', '$http', 'Global','$window',
function($scope, $http,$window) {
$scope.header = [{'field':'first_name', 'displayName':'First name','type':'required'},{'field':'last_name', 'displayName':'Last Name','type':'required'},{'field':'email','displayName':'Email Address','type':'required'}];
$scope.headerAll=[{'field':'first_name', 'displayName':'First name','type':'required'},{'field':'last_name', 'displayName':'Last Name','type':'required'},{'field':'email', 'displayName':'Email','type':'required'},{'field':'isMarried', 'displayName':'marital Status','type':'optional'},{'field':'nick_name', 'displayName':'Nick Name','type':'optional'}]
$scope.optional = [];
$scope.data=[{'first_name':'ruth','last_name':'vick','email':'[email protected]','isMarried':'no','nick_name':'ruthu'},{'first_name':'rahul','last_name':'kumar','email':'[email protected]','isMarried':'no','nick_name':'rahul'},{'first_name':'vicky','last_name':'gupta','email':'[email protected]','isMarried':'no','nick_name':'vicky'}]
$scope.headerAll.forEach(function(result){
if (result.type === 'optional') {
$scope.optional.push(result);
}
});
console.log($scope.optional);
$scope.addColumn = function(field){
/*$scope.toPush = {'field':'marital', 'displayName':'married','type':'required'};
$scope.header.push($scope.toPush);*/
$scope.optional.forEach(function(result){
if (result.field === field) {
$scope.header.push(result);
}
});
};
$scope. deleteColumn = function(field,index){
console.log(index);
$scope.optional.forEach(function(result){
console.log(result.field);
if (result.field === field) {
$scope.header.splice(index,1);
}
});
};
$scope.toPoint = function(index){
$scope.index = index;
console.log($scope.index);
};
$scope. editColumn = function(currentField,fieldToEdit,index){
$scope.header.splice($scope.index,1);
$scope.headerAll.forEach(function(result){
if(result.field === fieldToEdit){
$scope.header.splice($scope.index,0,result);
}
});
};
$scope.showAddBtn = 'true';
$scope.addRowButton = function(){
$scope.showInput = 'true';
$scope.showAddBtn = 'false';
};
$scope.cancel = function(){
$scope.showInput = 'false';
$scope.showAddBtn = 'true';
};
$scope.addRow = function(){
$scope.headerAll.forEach(function(result){
var x= result.field;
console.log(x);
$scope.rowObj = {
x : x
};
console.log($scope.rowObj);
});
};
}
]);
<div>
<table class="table table-bordered table-hover">
<thead class="wrapper">
<tr>
<th ng-repeat="data in header">
<div class="col-md-9">{{data.displayName}}</div>
<div class="col-md-1">
<button href="" ng-click="deleteColumn(data.field,$index)"><span class=" glyphicon glyphicon-trash pull-right"> </span></button>
</div>
<div class="dropdown col-md-1" >
<button class="glyphicon glyphicon-pencil dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" ng-click = "toPoint($index);">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
<li role="presentation" ng-repeat="dataEdit in headerAll"><a role="menuitem" tabindex="-1" href="" ng-click="editColumn(data.field,dataEdit.field,$index)">{{dataEdit.displayName}}</a></li>
</ul>
</div>
</th>
<th><div class="dropdown" >
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Add Columns
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
<li role="presentation" ng-repeat="optionalHeader in optional"><a role="menuitem" tabindex="-1" href="" ng-click="addColumn(optionalHeader.field)">{{optionalHeader.displayName}}</a></li>
</ul>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="active" ng-repeat="row in data">
<td ng-repeat="fields in headerAll">
{{row.fields.field}}
</td>
</tr>
<tr>
<td ng-repeat="fields in header">
<input type="text" ng-show="showInput" ng-model="input"></input>
</td>
<td>
<a href="" style="color:#63822E" ng-click="addRow()">
<h5 ng-show= "showInput"><span class="glyphicon glyphicon-ok" ></span></h5>
</a>
<a href="" style="color:#63822E">
<h5 ng-show= "showInput" ng-click="cancel()"><span class="glyphicon glyphicon-remove" ></span></h5>
</a>
<a href= "" style="color:#63822E" ng-click = "addRowButton()" ng-show = 'showAddBtn'>
<h5 ><span class="glyphicon glyphicon-plus-sign"></span>
Add a new row
</h5>
</a>
</td>
</tr>
</tbody>
</table>
</div>
나는 $ scope.headerAll에서 가져온 해당 헤더는 $ scope.data에 푸시하기 위해 입력 상자에 입력 무엇도합니다;
감사합니다.
감사합니다 .. :) 도움 – user3777846