だから私がやろうとしているのは、行データからデータを取得し、その行からオブジェクトのプロパティをモーダル ビュー内のフィールドに表示することです。また、送信ボタンが押されたとき - 編集されたフィールド値は、対応する行データを編集する必要があります。
次のコードを取得しましたが、フィールド値に人物のオブジェクト プロパティが表示されず、送信ボタンもテーブルを更新しません。
どんな助けでも大歓迎です。
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>
HTML インデックス Javascript ファイル コード:
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');
};
};
});
前もって感謝します。私は StackOverflow を初めて使用するので、何か問題がありましたら、コメントでお知らせください。すべて更新します。:)