zoukankan      html  css  js  c++  java
  • mui angular获取ajax数据到页面上

    var app= angular.module("myApp",[]);
    app.service("getDate",function($http){
    return $http.get("../product1.json")
    });
    app.controller("ctrl",function($scope,getDate){
    getDate.then(function(res){
    $scope.data=res.data;
    })
    });
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script src="js/shopping.js"></script>
    </head>
    <body ng-app="myApp">
    <table class="table table-bordered" ng-controller="ctrl">
    <thead>
    <tr>
    <th>产品编号</th>
    <th>产品名称</th>
    <th>购买数量</th>
    <th>产品单价</th>
    <th>产品总价</th>
    <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="elem in data">
    <td>{{elem.id}}</td>
    <td>{{elem.name}}</td>
    <td>{{elem.count}}</td>
    <td>{{elem.price}}</td>
    <td>{{elem.count}}*{{elem.price}}</td>
    <td><button class="btn btn-danger">删除</button></td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
  • 相关阅读:
    摆花
    关于我的博客
    博客美化更新日志
    页面美化代码1.x
    本人已转至新博客!
    回归博客园
    退役快乐
    Luogu神贴合辑
    代码高亮预览
    NOIp2018普及组初赛解题报告
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6825424.html
Copyright © 2011-2022 走看看