0
私は3つのhtmlファイルを持ち、テーブルにデータを挿入しようとしました。私はテーブルにデータを挿入することに成功しましたが、それらを削除することはできません。私は正しい価値を返さないと思っています。あるいは、何かが間違っているかもしれません。何か助けてください？ （I動作を除去するために、関連するすべての部品をコメントしている）Angularjs - テーブルの行を削除する（工場でngRouteを使用）
main.htmlを
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<link rel="icon" href="data:;base64,=">
</head>
<body>
<ul class="papa">
<li><a href="/1_input">input</a></li>
<li><a href="/2_output">output</a></li>
</ul>
<ng-view></ng-view>
<script>
var app1 = angular.module('myApp', ['ngRoute']);
app1.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
$routeProvider
.when('/1_input', {
controller: 'input_control',
templateUrl: '/1_input.html'
})
.when('/2_output/:name/:kor/:eng/:math', {
controller: 'output_control',
templateUrl: '/2_output.html'
})
// .when('/2_output', {
// controller: 'delete_control',
// templateUrl: '/2_output.html'
// })
// .when('/2_output/:index', {
// controller: 'output_control2',
// templateUrl: '/2_output.html'
// })
.otherwise({redirectTo:'/1_input'});
$locationProvider.html5Mode({ enabled: true, requireBase: false });
}]);
app1.controller('input_control', function($scope, $location, DataService){
$scope.loadView2 = function(){
DataService.set($scope.name, $scope.kor, $scope.eng, $scope.math);
$location.path('/2_output/'+$scope.name+'/'+$scope.kor+'/'+$scope.eng+'/'+$scope.math);
}
});
app1.controller('output_control',function($scope, DataService){
$scope.list77 = DataService.get();
});
// app1.controller('delete_control', function($scope, $location, DataService){
// $scope.delete = function(xx){
// DataService.delete88(xx);
// $location.path('/2_output/'+xx);
// }
// });
// app1.controller('output_control2',function($scope, DataService){
// $scope.list77 = DataService.delete88(xx);
// });
app1.factory('DataService', function(){
var appData = [];
var appData1 = [];
function set(data1, data2, data3, data4){
appData.push({
id: data1,
kor: parseInt(data2),
eng: parseInt(data3),
math: parseInt(data4),
tot: parseInt(data2)+parseInt(data3)+parseInt(data4),
avg: (parseInt(data2)+parseInt(data3)+parseInt(data4))/3
});
}
function get(){return appData}
// function delete88(xx){
// return appData.splice(xx, 1);
// }
// //function del_get(){return appData1}
return{ set:set, get:get/*, delete88:delete88*/}
})
</script>
1_input.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1_input</title>
</head>
<body>
name:<input type="text" ng-model="name"/> <br/>
kor_:<input type="text" ng-model="kor"/> <br/>
eng_:<input type="text" ng-model="eng"/> <br/>
math:<input type="text" ng-model="math"/> <br/>
<br>
<button ng-click="loadView2()">to output page</button>
</body>
</html>
2_output.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2_output</title>
<style>
table, th, td{
text-align: center;
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd){ background-color: #f2f2f2; }
table tr:nth-child(eve){ background-color: #ffffff; }
</style>
</head>
<body>
<table>
<tr>
<th>name</th>
<th>kor</th>
<th>eng</th>
<th>math</th>
<th>tot</th>
<th>avg</th>
<!-- <th>del</th> -->
</tr>
<tr ng-repeat="listabc in list77 track by $index">
<td>{{listabc.id}}</td>
<td>{{listabc.kor}}</td>
<td>{{listabc.math}}</td>
<td>{{listabc.eng}}</td>
<td>{{listabc.tot}}</td>
<td>{{listabc.avg}}</td>
<!-- <td><button ng-click="delete($index)">삭제</button></td> -->
</tr>
</table>
</body>
</html>
私は上記のコードで 'ng-controller'を表示しません – Cruzer
ルータに定義されています。私はこれが問題だと思う。両方のコントローラで同じテンプレートを使用する。コントローラーを1つだけ使用する必要があります。なぜコントローラーを使用する必要があるのかを判断できないからです。 – chabeee
@chabeeeええ、あなたは正しいです。私はもう少し調べて、あなたがui-routerを使用すると私の問題は解決すると思う。 –