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

Angularjs Material的更多相关文章

  1. 内部技术分享的 PPT

    本文的基础是搞了一次内部的技术分享,在此也分享一下本次的PPT的一些内容.先列一下大概内容吧. EF-Code First API(WCF.WebAPI) Xaml MVVM AOP Xamarin. ...

  2. [AngularJS] angular-md-table for Angular material design

    Download from npm:https://www.npmjs.com/package/angular-md-table +: Responsive: Has both Mobile view ...

  3. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  4. 使用 AngularJS 和 Electron 构建桌面应用

    GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是io.js 运行时的衍生,专注于桌面应用而 ...

  5. 20个免费的 AngularJS 资源和开发教程

    曾经,jQuery 无疑是最受欢迎的开源的 JavaScript 库,如今它有了很多的竞争对手,像 AngularJS.React.KnockoutJS 等等.在这里,我想重点关注一下 Angular ...

  6. angularjs 延迟更新和angularjsUI

    angularjsUI库https://material.angularjs.org/latest/ ng-model-options="{ updateOn: 'blur' }" ...

  7. 拟物设计和Angular的实现 - Material Design(持续更新)

    Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...

  8. 深入探索AngularJS(持续更新)

    数据双向绑定并不是Angular最出彩的地方.大部分对AngularJs的介绍都偏重于使用,使用的学习只是学了AngularJs的API,而那只能AngularJs的很小一部分.随着使用越来越深,系统 ...

  9. 通过Anuglar Material串串学客户端开发 - javascript编译和gulpfile.js

    Angular Material不仅仅有本身框架的源代码,还有在这个框架上实现的一个应用docs.更为强大的是,这个应用是真正的产品网站:就是它的官网.我有理由相信,这个网站是从源代码直接发布的,从网 ...

随机推荐

  1. ImageView最大高度和宽度失效解决方案

    解决方案 做RecyclerView的 item 布局时,用到imageview ,可是图片按原始尺寸显示,不规范. 所以去google了一下imageview的宽高限制,就试了下maxheight/ ...

  2. java中File类应用:遍历文件夹下所有文件

    练习: 要求指定文件夹下的所有文件,包括子文件夹下的文件 代码: package 遍历文件夹所有文件; import java.io.File; public class Test { public ...

  3. Chrome 开发者工具断点调试(视频教程)

    很多人不了解 Chrome Dev Tools (开发者工具)的使用方法和技巧. 其中很多技能,无论是前端开发从业者,还是普通用户,了解一些还是对日常很有帮助的. 本猿定期录制.甚至根据您的需求来订制 ...

  4. nodejs中exports与module.exports的区别详细介绍

    如果模块是一个特定的类型就用Module.exports.如果模块是一个典型的"实例化对象"就用exports. exports.name = function() { conso ...

  5. 水平方向的RecyclerView

    最近做了一个项目需要实现一个卡片式的水平滑动,但是不能手势滑动,点击卡片上的按钮之后滑动到下一个卡片,所以想到用RecyclerView实现,去掉它的手势滑动,点击按钮之后再代码控制滑动到下一个卡片. ...

  6. 使用Azure Policy(策略)强制实现资源Tag的坑

    Azure的Tag(标记)可以帮助运维人员对云资源分类从而方便地进行计费和资源管理.然而在具体实践中工程师部署云资源的时候常常会忘记给资源做标记打Tag. 针对这个问题,Azure的官方文档建议是可以 ...

  7. C#基础知识-XML介绍及基本操作(十)

    在讲了一系列的基础文档之后,现在开始讲一些实例.对于一些数据不是很大的程序,或者只是一些配置文件,需要本地存储的,完全可以使用XML代替数据库,因为只是去操作单个文件会比操作数据库要简单很多,在程序中 ...

  8. 解决(防止)DDOS攻击的另一种思想

    本方案适合作最后的处理方案. 在服务器遭到DDOS攻击后,防火墙.高防盾或者其他的方案都已经失去了效力,这时运维人员无任何方案可以处理,并且只能任由DDOS攻击或关闭服务器时,该方案可以有限的抵挡大部 ...

  9. Google帝国研究——Google的产业构成

                                                                                        Google帝国研究--Goog ...

  10. html模板中的数字保留两位小数

    <script> //html模板中的数字保留两位小数 function formatCurrency(num) { num = num.toString().replace(/\$|\, ...