AngularJS系列(六)——表格

我会带着你远行 2022-06-07 23:54 177阅读 0赞

用ng-repeat显示表格十分方便容易

### 基本显示 ###

<div ng-app="myApp"ng-controller="customersCtrl">
             <table>
                       <trng-repeat="x in customers">
                                <td>{
       {x.Name}}</td>
                                <td>{
       {x.Country}}</td>
                       </tr>
             </table>
    </div>

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope,$http) {
       $http.get("/try/angularjs/data/Customers_JSON.php").then(function(response) {
                       $scope.customers= response.data.records;
             })
    });
    </script>

### 加样式，加序号，按'Country’排序，’Country’大写 ###

<style>
    table, th , td  {
     border: 1px solid grey;
     border-collapse: collapse;
     padding: 5px;
    }
    table tr:nth-child(odd)     {
     background-color: #f1f1f1;
    }
    table tr:nth-child(even) {
     background-color: #ffffff;
    }
    </style>

<div ng-app="myApp"ng-controller="customersCtrl">
    <table>
     <tr ng-repeat="x in names | orderBy:'Country'">
             <td>{
       {$index+ 1}}</td>
       <td>{
       { x.Name }}</td>
       <td>{
       { x.Country | uppercase}}</td>
     </tr>
    </table>
    </div>

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl',function($scope, $http) {
       $http.get("/try/angularjs/data/Customers_JSON.php")
       .then(function (result) {
           $scope.names = result.data.records;
       });
    });
    </script>

### 使用 $even 和 $odd判断 ###

<div ng-app="myApp"ng-controller="customersCtrl">
    <table>
     <tr ng-repeat="x in names">
       <td ng-if="$odd"style="background-color:#f1f1f1">
       {
       { x.Name }}</td>
       <td ng-if="$even">
       {
       { x.Name }}</td>
       <td ng-if="$odd"style="background-color:#f1f1f1">
       {
       { x.Country }}</td>
       <td ng-if="$even">
       {
       { x.Country }}</td>
     </tr>
    </table>
    </div>

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl',function($scope, $http) {
       $http.get("/try/angularjs/data/Customers_JSON.php")
       .then(function (result) {
           $scope.names = result.data.records;
       });
    });
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 AngularJS之表格设置样式

1、问题背景 AngularJS表格table，利用样式设置表格间隔色 2、实现源码 <!DOCTYPE html> <html>

我不是女神ヾ/ 2022年07月15日 04:17/ 0 赞/ 229 阅读

相关 AngularJS之表格序号

1、问题背景 AngularJS表格需要序号，可以利用$index来作为序号 2、实现实例 <!DOCTYPE html> <html

谁践踏了优雅/ 2022年07月15日 04:17/ 0 赞/ 178 阅读

相关 AngularJS系列(九)——模块

模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。通过 AngularJS 的 angular.modul

Bertha 。/ 2022年06月08日 00:11/ 0 赞/ 198 阅读

相关 AngularJS系列(八)——事件

ng-click ：点击 ng-click 指令定义了 AngularJS 点击事件。 <div ng-app="myApp"ng-controller="my

柔光的暖阳◎/ 2022年06月08日 00:11/ 0 赞/ 203 阅读

相关 AngularJS系列(六)——表格

用ng-repeat显示表格十分方便容易基本显示 <div ng-app="myApp"ng-controller="customersCtrl">

我会带着你远行/ 2022年06月07日 23:54/ 0 赞/ 178 阅读

相关 AngularJS系列(四)——服务

服务是一个函数或对象，可在AngularJS应用中使用。可以和后台中的service去理解。 $location $location，和js中的location作用相似

绝地灬酷狼/ 2022年06月07日 23:41/ 0 赞/ 187 阅读

相关 AngularJS的ng-repeat显示表格

代码下载：[https://files.cnblogs.com/files/xiandedanteng/angualrJSngRepeatTable.rar][https_fi

川长思鸟来/ 2022年03月27日 10:07/ 0 赞/ 196 阅读

相关 angularJS(六)angularJsDemo之事件

需求：输入两个数通过点击事件来得出结果 ![20190405180719421.png][] ![20190405181019179.png][] 这里会用到cl

忘是亡心i/ 2022年02月23日 01:08/ 0 赞/ 229 阅读

相关 Angularjs 导出excel表格

//导出excel表 $scope.exportOrder = function () { $scope.datetime.startTime=

￡神魔★判官ぃ/ 2021年12月23日 17:41/ 0 赞/ 509 阅读

相关 AngularJS 4(六)【依赖注入】

依赖注入依赖注入是重要的程序设计模式。 Angular 有自己的依赖注入框架，离开了它，几乎没法构建 Angular 应用。它使用得非常广泛，以至于几乎每个人都会把它

约定不等于承诺〃/ 2021年06月26日 16:06/ 0 赞/ 411 阅读