Angularjs - 删除表行（使用ngRoute，工厂）

我有三个html文件，并试图插入，删除数据到表。我已经成功地将数据插入到表格中，但无法删除这些数据。我在想，我没有回报正确的价值，或者其他的东西是错的。任何帮助吗？（我曾评论相关删除操作所有的部件）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>

来源

2016-11-21 J. long

我没有在上面的代码中看到任何'ng-controller' – Cruzer

它在路由器中定义。我认为这是问题。两个控制器都使用相同的模板。你应该只有一个控制器，因为它不能决定它应该使用哪个控制器！ – chabeee

@chabeee是的，你是对的。我搜索了更多，我认为我的问题将得到解决，如果我使用UI路由器 –

我没有看到您的数据加载位置。在你的删除控制器中，你在哪里加载list77？

来源

2016-11-21 09:08:45 trichetriche

Angularjs - 删除表行（使用ngRoute，工厂）

回答

相关问题