使用angularJS接收json數據並進行數據的顯示

時間 2019-12-14

標籤使用 angularjs 接收 json 數據並進顯示欄目 AngularJS 简体版

原文原文鏈接

1.引入JSjavascript

<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>

2.指定模塊和控制器java

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController" ng-init = findAll()>

3.編寫js代碼angularjs

<script type="text/javascript">
        var app= angular.module('pinyougou',[]);//定義模塊
            app.controller('brandController',function($scope,$http){
            //讀取列表
            $scope.findAll = function(){
                $http.get('../brand/findAll.do').success(
                        function(response){
                            $scope.list = response;
                        }
                );
            }    
        });
    </script>

4.循環數據表格app

<tbody>
    <tr ng-repeat="entity in list">
         <td><input  type="checkbox" ></td>                                          
         <td>{{entity.id}}</td>
         <td>{{entity.name}}</td>                                         
         <td>{{entity.firstChar}}</td>                                         
          <td class="text-center">                                           
          <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"  >修改</button>                                           
          </td>
     </tr>                                     
</tbody>