css如下：
1. 2. div{ 3. width: 300px; 4. height: ; 5. margin: 0 auto; 6. } 7. div h5{ 8. width: 300px; 9. text-align: center; 10. height: 30px; 11. } 12. div p{ 13. width: 250px; 14. margin: 0 auto; 15. } 16. div input{ 17. float: right; 18. } 19. div button{ 20. width: 100px; 21. height: 30px; 22. margin: 0 auto; 23. display: block; 24. } 25. 26. tr:nth-child(odd){ 27. background: #e5e5e5; 28. } 29. tr:first-child{ 30. background: #999; 31. }
html
1. <body ng-app="myApp" ng-controller="myCtrl"> 2. <h2 style="text-align: center;">电影管理</h2> 3. <input type="text" placeholder="电影名称" ng-model="by" /> 4. <select ng-model="orders"> 5. <option value="">---排序---</option> 6. <option value="-name">按名称排序</option> 7. <option value="-price">按票价排序</option> 8. 9. </select> 10. <input type="button" value="添加" ng-click="addAll()" /> 11. <button ng-click="plsc()">批量删除</button> 12. <table border="1" width="100%"> 13. <tr> 14. <th><input type="checkbox" ng-click="fx()" /></th> 15. <th>电影名称 </th> 16. <th>票价</th> 17. <th>类别</th> 18. <th>上映日期</th> 19. <th>时长</th> 20. <th>导演</th> 21. <th> 22. 安排 23. </th> 24. 25. </tr> 26. <tr ng-repeat="x in movie | filter:{name:by} | orderBy : orders"> 27. <td><input type="checkbox" ng-model="x.ck" /></td> 28. <td>{{x.name}}</td> 29. <td>{{x.price}}</td> 30. <td>{{x.typea}}</td> 31. <td>{{x.redDate|date:'yyyy-MM-dd hh:mm:ss'}}</td> 32. <td>{{x.time}}分钟</td> 33. <td>{{x.actor}}</td> 34. <td> 35. <input type="button" value="删除" ng-click="del($index)" /> 36. <input type="button" value="修改" ng-click="updS($index)" /> 37. 38. </td> 39. </tr> 40. </table> 41. 42. <div ng-show="addShow"> 43. <h5>添加页面</h5> 44. <p>电影名 ： <input type="text" ng-model="names" /></p> 45. <p>票价 ： <input type="text" ng-model="prices" /></p> 46. <p>类别 ： <input type="text" ng-model="types" /></p> 47. <p>时间 ： <input type="text" ng-model="datas" /></p> 48. <p>时间长： <input type="text" ng-model="times" /></p> 49. <p>导演 ： <input type="text" ng-model="daoyan" /></p> 50. <button ng-click="save()">保存</button> 51. </div> 52. <div ng-show="updShow"> 53. <h5>添加页面</h5> 54. <p>电影名 ： <input type="text" ng-model="obj.names" /></p> 55. <p>票价 ： <input type="text" ng-model="obj.prices" /></p> 56. <p>类别 ： <input type="text" ng-model="obj.types" /></p> 57. <p>时间 ： <input type="date" ng-model="obj.datas" /></p> 58. <p>时间长： <input type="text" ng-model="obj.times" /></p> 59. <p>导演 ： <input type="text" ng-model="obj.daoyan" /></p> 60. <button ng-click="xiugai()">修改</button> 61. </div> 62. 63. </body>
angular代码
1. <script> 2. var vm=angular.module('myApp',[]) 3. vm.controller('myCtrl',function($scope,$http){ 4. $http.get("js/three.json").then(function(res){ 5. //获取数据 , 在json中 如果 中括号前有信息 就放在data 后面 ，如果没有 就不用放了 6. $scope.movie=res.data 7. //定义一个空对象来接受传值 8. $scope.obj={} 9. var idx=-1 10. $scope.updS=function($index){ 11. $scope.updShow=true 12. $scope.obj.names=$scope.movie[$index].name 13. $scope.obj.prices=$scope.movie[$index].price 14. $scope.obj.types=$scope.movie[$index].typea 15. $scope.obj.datas=$scope.movie[$index].redDate 16. $scope.obj.times=$scope.movie[$index].time 17. $scope.obj.daoyan=$scope.movie[$index].actor 18. 19. idx=$index 20. 21. } 22. 23. $scope.xiugai=function(){ 24. 25. $scope.movie[idx].name=$scope.obj.names 26. $scope.movie[idx].price=$scope.obj.prices 27. $scope.movie[idx].typea=$scope.obj.types 28. $scope.movie[idx].redDate=$scope.obj.datas 29. $scope.movie[idx].time=$scope.obj.times 30. $scope.movie[idx].actor=$scope.obj.daoyan 31. 32. $scope.updShow=false 33. 34. } 35. //点击添加按钮添加模板出现 36. $scope.addAll=function(){ 37. $scope.addShow=true 38. 39. } 40. $scope.save=function(){ 41. var name=$scope.names 42. var price=$scope.prices 43. var type=$scope.types 44. var datea=$scope.datas 45. var time=$scope.times 46. var dao=$scope.daoyan 47. 48. $scope.movie.push({ 49. name:name, 50. price:price, 51. typea:type, 52. redDate:datea, 53. time:time, 54. actor:dao 55. 56. 57. 58. 59. }) 60. $scope.names="" 61. $scope.prices="" 62. $scope.types="" 63. $scope.datas="" 64. $scope.times="" 65. $scope.daoyan="" 66. 67. $scope.addShow=false 68. 69. } 70. 71. 72. 73. //全选反选 74. $scope.fx=function(){ 75. for (var i=0 ;i<$scope.movie.length ; i++) { 76. $scope.movie[i].ck=!$scope.movie[i].ck 77. } 78. 79. 80. } 81. 82. //批量删除 83. $scope.plsc=function(){ 84. for (var i=0 ;i<$scope.movie.length ;i++) { 85. if ($scope.movie[i].ck==true) { 86. $scope.movie.splice(i,1) 87. i-- 88. } 89. 90. } 91. 92. 93. } 94. 95. //删除 96. 97. $scope.del=function(index){ 98. if (confirm("确定需要删除吗？")) { 99. $scope.movie.splice(index,1) 100. } 101. } 102. 103. 104. 105. 106. }) 107. 108. }) 109. 110. </script>
json数据
1. [ 2. { 3. "name":"菊花与刀", 4. "price":"30", 5. "typea":"战争", 6. "redDate":"12345647899", 7. "time":"140", 8. "actor":"田利明" 9. 10. }, 11. { 12. "name":"我不是药神", 13. "price":"40", 14. "typea":"喜剧", 15. "redDate":"444445845678", 16. "time":"140", 17. "actor":"王银鹏" 18. }, 19. { 20. "name":"侏罗纪世界2", 21. "price":"38", 22. "typea":"科幻", 23. "redDate":"78945612348", 24. "time":"150", 25. "actor":"高帅帅" 26. 27. }, 28. { 29. "name":"毒液", 30. "price":"78", 31. "typea":"科幻", 32. "redDate":"4567813873564", 33. "time":"240", 34. "actor":"姚志强" 35. 36. } 37. 38. 39. ]
ok
