美文网首页
ng-table插件(二-惰性加载数组)

ng-table插件(二-惰性加载数组)

作者: MakingChoice | 来源:发表于2016-06-16 01:38 被阅读768次

AngularJS ng-table插件第二讲,下面这个官网例子会根据ng-option来调用map来改变内部数据,然后整个ng-table也会改变。
下面是源码,我会根据源码来讲解


<div ng-app="myApp">
  <div ng-controller="demoController as demo">
    <h2 class="page-header">Lazy loading managed array</h2>
    <div class="bs-callout bs-callout-info">
      <h4>Overview</h4>
      <p>You are not limited to having the data array to hand at the time when <code>NgTableParams</code> is created. So for example you could load the data using <code>$http</code> and then hand this to <code>NgTableParams</code></p>
    </div>
    <div class="form-inline" style="margin-bottom: 20px">
      <div class="form-group">
        <label for="datasets">Select dataset</label>
        <select id="datasets" class="form-control" ng-model="demo.dataset" ng-options="dataset for ds in demo.datasets"
                ng-change="demo.changeDs()"></select>
      </div>
    </div>
    <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
      <tr ng-repeat="row in $data">
        <td data-title="'Name'" filter="{name: 'text'}" sortable="'name'">{{row.name}}</td>
        <td data-title="'Age'" filter="{age: 'number'}" sortable="'age'">{{row.age}}</td>
        <td data-title="'Money'" filter="{money: 'number'}" sortable="'money'">{{row.money}}</td>
      </tr>
    </table>
  </div>
</div>
  • 使用<code>controller as demo</code>来把<code>controller</code>内的对象绑定在<code>controller </code>的实例对象上。可以跨越<code>scope</code>调用,进行双向绑定。
  • 当<code>ng-option</code>发生变化的时候,会触发<code>ng-change</code>,<code>ng-change</code>会把值传进到<code>changeDs()</code>中。
  • <code>$data</code>是ng-table内部数据源,<code>row in $data</code> ng-table会遍历展示数据源。
  • <code>filter="{name: 'text'}" </code> filter属性会规定过滤条件。
(function() {
  "use strict";
  var app = angular.module("myApp", ["ngTable", "ngTableDemos"]);
  app.controller("demoController", demoController);
  demoController.$inject = ["NgTableParams", "ngTableSimpleList"];
  function demoController(NgTableParams, simpleList) {
    var self = this;
    self.changeDs = changeDs;//因为已经用controller as demo,相当于实例化controller,直接通过this可以调用
    self.datasets = ["1", "2"];//ng-options的值
    self.dataset1 = simpleList;//simpleList相当于ngTableSimpleList注入的数据源。与createDs2想对应(当ng-option为1的时候)。
    self.dataset2 = createDs2();//与createDs2想对应,与ng-option=2对应与。
    self.tableParams = new NgTableParams();//实例化table插件
    function changeDs() {//当ng-change时候调用
      self.tableParams.settings({
        dataset: self["dataset" + self.dataset];//确定调用dataset1还是dataset2
      });
    }
    function createDs2() {//这里就是通过map改变数据
      return simpleList.map(function(item) {
        return angular.extend({}, item, {
          age: item.age + 100
        });
      });
    }
  }
})();
(function() {
  "use strict";
  angular.module("myApp").run(configureDefaults);
  configureDefaults.$inject = ["ngTableDefaults"];
  function configureDefaults(ngTableDefaults) {//这里可以看出源码是根据provider实现的
      ngTableDefaults.params.count = 5;
      ngTableDefaults.settings.counts = [];
  }
})();

相关文章

  • ng-table插件(二-惰性加载数组)

    AngularJS ng-table插件第二讲,下面这个官网例子会根据ng-option来调用map来改变内部数据...

  • Stanford iOS7 Lesson Two

    1.懒加载 惰性实例化 简称懒加载 lazy instantiation 代码如下: 2 可变数组 NSMuta...

  • ng-table插件(一)

    最近重构公司的一个列表项目,从以前的纯展示与modal更改,要加入直接编辑的功能,最后选择了ng-table。选择...

  • Android插件化系列第(四)篇---插件加载机制两种方案

    这篇博客说说插件的加载机制,建议阅读Android插件化系列第(二)篇---动态加载技术之apk换肤了解类的加载机...

  • Java杂

    静态内部类的加载不需要依附外部类,在使用时才加载。 二维数组其实就是二级数组,数组中包含数组。 Arrays.co...

  • android插件化

    一.插件化来由 65536/64k 二.插件化所要解决的问题 1.动态加载apk 2.资源加载 3.代码加载

  • android插件化学习资料集合

    Android插件化开发 第一篇 [动态加载apk] Android插件化开发 第二篇 [动态加载apk优化] A...

  • chrome安装postman插件

    一、下载插件包: 从网上下载POSTMAN安装包; 二、加载插件包: 如图所示,勾选开发者模式,然后加载插件包; ...

  • android插件化(四)Hook加载插件APK(ClassLo

    Hook加载插件APK(ClassLoader方式) 前言 前面插件化一和二说了下插桩式加载未安装的APK,主要是...

  • ng-table插件(三-分页)

    ng-table支持一个时间段内浏览一段时间加载一部分数据, NgTableParams 构造函数内置了一个默认的...

网友评论

      本文标题:ng-table插件(二-惰性加载数组)

      本文链接:https://www.haomeiwen.com/subject/nolmdttx.html