1
그래서 내가하려는 것은 행 데이터에서 데이터를 가져 와서 해당 행의 개체 속성을 모달보기 안의 필드에 표시하는 것입니다. 또한 제출 버튼을 누르면 편집 된 필드 값이 해당 행 데이터를 편집해야합니다.부트 스트랩 각도 UI 모달이 필드 데이터를 업데이트하거나 표시하지 않습니다.
다음 코드가 있지만 필드 값에 사람의 개체 속성이 표시되지 않고 제출 단추로도 테이블이 업데이트되지 않습니다.
도움을 주시면 감사하겠습니다.
HTML 코드 :
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="ui-bootstrap-tpls-1.3.3.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="site.css">
</head>
<body>
<div class="containter">
<div class="jumbotron">
<h1>JSON to Table</h1>
</div>
<div ng-app="myTable" ng-controller="tableCtrl">
<div id="table1Div" style="background:white;position absolute;">
<table class="table table-hover table-bordered" id="peopleTable">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Nickname</th>
</tr>
<tr ng-repeat="person in people" ng-click="change(person)">
<td>
{{person.FirstName}}
</td>
<td>
{{person.LastName}}
</td>
<td>
{{person.Age}}
</td>
<td>
{{person.Nickname}}
</td>
</tr>
</table>
</div>
<div ng-include="modalTemplate.html"></div>
<div class="centered">
<button type="button" class="btn btn-primary" data-ng-click="addNewEntry()">Add New Entry</button>
</div>
<div id="searchFirstName">
<div class="panel panel-primary">
<div class="panel-heading">Change Table Background Colour: </div>
<div class="panel-body">
<div id"buttonAndColours">
<button class="btn btn-primary" id="tableBackgroundButton" style="float: right">Change</button>
<div class="colours" style="background-color:red;"></div>
<div class="colours" style="background-color:yellow;"></div>
<div class="colours" style="background-color:lightBlue;"></div>
<div class="colours" style="background-color:green;"></div>
<div class="colours" style="background-color:white;"></div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Search For First Name in Table:</div>
<div class="panel-body">
<p>Search: <input type="text" ng-model="searchText"/> First Name being searched for: <u><b>{{searchText}}</u></b></p>
<br/>
<table class="table table-condensed">
<tr>
<th>First Names to be Searched For:</th>
</tr>
<tr ng-repeat="person in people | filter:searchText">
<td>{{ person.FirstName }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ModalView 템플릿 코드 :
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Row Data</h4>
</div>
<div class="modal-body" name="modalData">
<form class="form-horizontal form-width" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="firstname">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="firstN" ng-bind="FirstNameField">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="lastname">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="lastN" ng-bind="LastNameField">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="age">Age:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ageN" ng-bind="AgeField">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="nickname">Nickname:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nickN" ng-bind="NicknameField">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="cancel()">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal" ng-click="submitData()">Submit</button>
</div>
var myTable = angular.module('myTable', ['ui.bootstrap']);
myTable.controller('tableCtrl', function($scope, $http, $uibModal) {
$http.get("xxxxxxxx.json").success(function(response){
$scope.people = response.People;
});
$scope.change = function(changeableData) {
var modalInstance = $uibModal.open({
templateUrl: 'modalView1.html',
controller: ModalInstanceCtrl,
size: 'lg',
resolve: {
person: function() {
return changeableData;
}
}
});
};
var ModalInstanceCtrl = function($scope, $uibModalInstance, person) {
$scope.FirstNameField = person.FirstName;
$scope.LastNameField = person.LastName;
$scope.AgeField = person.Age;
$scope.NicknameField = person.Nickname;
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
$scope.submitData = function() {
console.log("Submitted Data");
person.FirstName = $scope.FirstNameField;
person.LastName = $scope.LastNameField;
person.Age = $scope.AgeField;
person.Nickname = $scope.NicknameField;
$uibModalInstance.dismiss('submit');
};
};
});
Perfect! 고맙습니다! 나는 지금 차이점을 재검토했고 그것은 모두 의미가있다! :) – Imdad