Angularjs Material

公司用Angularjs Material进行开发，之前在网站上看了一些Demo，做一个学习的整理。

1、新建窗体的数据绑定

1.1修改kendo表格新增页面按钮，添加按钮，并Dialog一个窗体

 toolbar: [
    { template: "<a class='k-button k-button-icontext' ng-click='edit()'><span class='k-icon k-add'></span>新增</a> " },
    { template: "<a class='k-button k-button-icontext' ng-click='demo()'><span class='k-icon k-i-ungroup'></span>测试</a> " },
  ],

 //跳出新增界面
        $scope.edit = function (e) {
            $mdDialog.show(
                {
                    controller: DialogController,
                    templateUrl: 'basedata/views/NotamNoticeWarehouseAdd.html',
                    parent: angular.element(document.body),

                    //  targeEvent: ev,
                    clickOutsideToClose: true,
                })
        }
        function DialogController($rootScope, $scope, $mdDialog) {
            $scope.vm = {};
            $scope.vm.ID = newGuid();
            console.log($scope.vm);
            $scope.save = function () {
                $http({
                    method: 'post',
                    url: $rootScope.baseUrl + "odata/NotamNoticeWarehouse",
                    data: $scope.vm,
                    dataType: 'odata',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + $window.sessionStorage["userToken"], 'If-Modified-Since': '0'
                    }
                }).then(function (result) {
                    if (result.status == "201") {
                        console.log($scope);
                        $mdDialog.cancel();
                        $state.reload("app.NotamNoticeWarehouse");
                    }
                }, function (error) {
                    console.log(error);
                });
            }
            $scope.cancel = function () {
                $mdDialog.cancel();
            };
        }

1.2选择表格中的某一行，点击编辑，进行数据绑定，与读取

  {
     command: [{
     name: "EditChange",
     template: function (e, s) {
         return "<a class='k-button' href='' ng-click='EditChange()'><span class='k-icon k-i-ungroup'></span>编辑</a>"
       },
     },
     { name: "destroy" }], width: "188px"
  }

        //编辑界面
        var dataItem = [];
        $scope.EditChange = function () {
            var grid = $("#grid_app").data("kendoGrid");
            console.log(grid)
            var selectedRows = grid.select();
            console.log(selectedRows)
            dataItem = grid.dataItem(selectedRows);
            console.log(dataItem)
            if (selectedRows.length == 0) {
                alert("请选择要查看的条目");
                $state.go("app.NotamNoticeWarehouse");
                return false;
            }
            $mdDialog.show({
                controller: AirperformanceController,
                templateUrl: 'basedata/views/NotamNoticeWarehouseAdd.html',
                parent: angular.element(document.body),
                clickOutsideToClose: true,
                cache: false,
                // fullscreen: $scope.customFullscreen,
            }).then(function (answer) {
                $scope.status = 'You said the information was "' + answer + '".';
            }, function () {
                $scope.status = 'You cancelled the dialog.';
            });
        };
        function AirperformanceController($scope, $mdDialog) {
            $scope.cancel = function () {
                $mdDialog.cancel();
            };
            $scope.vm = {};
            if (dataItem != null) {
                $scope.vm = dataItem;

                console.log($scope.vm);
                $scope.save = function () {
                    console.log($scope.vm)
                    $http({
                        method: 'put',
                        url: $rootScope.baseUrl + "odata/NotamNoticeWarehouse" + "(" + $scope.vm.ID + ")",
                        data: $scope.vm,
                        dataType: 'odata-v4',
                        headers: {
                            'Content-Type': 'application/json', 'action': 'ch_update',
                            'Authorization': 'Bearer ' + $window.sessionStorage["userToken"], 'If-Modified-Since': '0',
                        }
                    }).then(function (result) {
                        console.log(result);
                        if (result.status == "204") {
                            console.log($scope);
                            $mdDialog.cancel();
                            $state.reload("app.NotamNoticeWarehouse");
                        }
                    }, function (error) {
                        console.log(error);

                        if (error.data.resultCode == -1) {
                            //alert(e.xhr.responseJSON.resultMsg);
                            window.location = 'error.html';
                        } else {
                            alert("查询失败");
                        }
                    });
                }

            }
        }

2、在提醒相关部门下拉框内，绑定某个数据库中部门字段

        

 // 提醒相关部门绑定数据
        var dataComeNearType = [];
        $http({
            url: $rootScope.baseUrl + "odata/ComeNearType",
            method: 'GET',
            //headers: {
            //    'Content-Type': 'application/json',
            //    'Authorization': 'Bearer ' + $window.sessionStorage["userToken"], 'If-Modified-Since': '0'
            //}
        }).success(function (data) {
            console.log(data)
            dataComeNearType = data.value;
        }).error(function (err) {
            //处理响应失败
            console.log(err);
        });

        //绑定数据
        $scope.loadDep = function () {
            var data = [];
            console.log(dataComeNearType)
            for (var i = 0; i < dataComeNearType.length; i++) {
                data.push(dataComeNearType[i].ComeNeartype);
            }
            $scope.ComeNeartypeData = data;
            console.log($scope.ComeNeartypeData)
            return $scope.ComeNeartypeData;
        };

 <md-input-container>
      <label>提醒相关部门</label>
      <md-select name="Dep" ng-model="vm.Dep" style="min-width:180px;" required md-on-open="loadDep()">
              <md-option ng-value="Dep" ng-repeat="department in ComeNeartypeData">{{department}} </md-option>
        </md-select>
 </md-input-container>

 

转载于:https://www.cnblogs.com/yanqi-lu/p/6962467.html