公司用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>