Angularjs Material

公司用Angularjs Material進行開發，以前在網站上看了一些Demo，作一個學習的整理。

一、新建窗體的數據綁定

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("查詢失敗");
                        }
                    });
                }

            }
        }

二、在提醒相關部門下拉框內，綁定某個數據庫中部門字段

        

 // 提醒相關部門綁定數據
        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>