六、UI-Grid Binding examples 结合实例

原文:106 Binding examples
UI-Grid支持在colDef.field的复杂对象绑定。

本教程显示了具有特殊字符、数组元素、嵌套属性和函数的属性的双向绑定。

注意函数不能编辑。

在自定义cellTemplates中可以使用:
COL_FIELD 将取代表格中单元格的值。cellTemplates可以使用在所有允许MODEL_COL_FIELD 取代表格中单元格的值的地方。使用MODEL_COL_FIELD 需要 ng-model=’field’。

代码:
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 500px;
  height: 250px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', function ($scope) {

$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', field: 'getZip()', enableCellEdit:false}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]
      };

}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

发表评论

电子邮件地址不会被公开。 必填项已用*标注